React HighCharts - 3D 是否可用于柱形图？

Question

在 React 应用程序中，我使用

highcharts

来图形表示数据。 我想要具有 3 轴的 3D 柱形图，例如

X, Y, Z

。

我通过参考

scatter3d

图表尝试了一个例子。

import React, { useEffect } from "react";
import Highcharts from "highcharts";
import highcharts3d from "highcharts/highcharts-3d";
import highcharts3dModule from "highcharts/modules/exporting";

highcharts3d(Highcharts);
highcharts3dModule(Highcharts);

const ThreeDHistogram = () => {
  useEffect(() => {
    const options = {
      chart: {
        type: "scatter3d",
        options3d: {
          enabled: true,
          alpha: 20,
          beta: 30,
          depth: 400,
          viewDistance: 10,
          frame: {
            bottom: {
              size: 1,
              color: "rgba(0,0,0,0.05)",
            },
          },
        },
      },
      title: {
        text: "",
      },
      subtitle: {
        text: "",
      },
      yAxis: {
        min: 0,
        max: 80,
        title: {
          text: "Y Axis",
        },
      },
      xAxis: {
        min: 0,
        max: 80,
        title: {
          text: "X Axis",
        },
        gridLineWidth: 1,
      },
      zAxis: {
        min: 0,
        max: 200,
        title: {
          text: "Z Axis",
        },
        showFirstLabel: false,
      },
      series: [
        {
          data: [
            { x: 0, y: 41, z: 21, color: "#5ac8fa" },
            { x: 11, y: 51, z: 42, color: "#5ac8fa" },
            { x: 11, y: 31, z: 65, color: "#5ac8fa" },
            { x: 22, y: 63, z: 28, color: "#5ac8fa" },
            { x: 22, y: 67, z: 45, color: "#5ac8fa" },
            { x: 44, y: 58, z: 74, color: "#5ac8fa" },
            { x: 44, y: 52, z: 84, color: "#5ac8fa" },
            { x: 77, y: 19, z: 33, color: "#5ac8fa" },
            { x: 77, y: 81, z: 52, color: "#5ac8fa" },
            { x: 88, y: 91, z: 85, color: "#5ac8fa" },
            { x: 60, y: 55, z: 155, color: "#5ac8fa" },
            { x: 32, y: 55, z: 105, color: "#5ac8fa" },
            { x: 10, y: 66, z: 185, color: "#aabdff" },
            { x: 70, y: 66, z: 15, color: "#5ac8fa" },
            { x: 72, y: 86, z: 150, color: "#aabdff" },
          ],
          name: "",
        },
      ],
    };

    Highcharts.chart("highcharts-container", options);
  }, []);

  return <div id="highcharts-container" />;
};

export default ThreeDHistogram;

此处，值未绘制在

Z

轴上，仅绘制在 X 和 Y 轴上。如何使其适用于所有轴？我想要 3D 柱形图本身。

Answer 1

Highcharts 不支持 3d 模式下柱系列的 z 坐标。它应该像 scatter3d 系列中那样实现：https://api.highcharts.com/highcharts/series.scatter3d.data.z.

您可以在我们的 GH 上提交功能请求：https://github.com/highcharts/highcharts

还有一种方法可以使用堆栈在不同的 z 位置上绘制列，但它更像是一种解决方法，而不是解决方案：

演示：https://codesandbox.io/s/highcharts-react-demo-forked-64tgdy