在react应用程序中,我使用highcharts
作为数据的图形表示。我想要3D柱形图与3轴一样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柱状图本身。
1条答案
按热度按时间fnvucqvd1#
Highcharts不支持在3d模式下列序列的z坐标。它应该像在scatter3d系列中一样实现:https://api.highcharts.com/highcharts/series.scatter3d.data.z。
您可以在我们的GH上提交功能请求:https://github.com/highcharts/highcharts
还有一种方法可以使用堆栈在不同的z位置绘制列,但它更像是一种解决方案:
Demo:https://codesandbox.io/s/highcharts-react-demo-forked-64tgdy