gpt4 book ai didi

javascript - 带有 ReactJS 的 Highcharts 3D 圆柱体

转载 作者:行者123 更新时间:2023-12-01 16:16:54 24 4
gpt4 key购买 nike

我试图在我的 React 组件中添加圆柱体 3D 图表。但是,我遇到了这个错误。

Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=cylinder
  • missingModuleFor: cylinder

在我的组件中,我的代码是

import React from "react";

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import highcharts3d from "highcharts/highcharts-3d";
highcharts3d(Highcharts);

const ChartComponent = ({ data }) => {
// console.log(data);
const options = {
chart: {
type: "cylinder",
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25,
},
},
title: {
text: "Popular Forks",
},

plotOptions: {
series: {
depth: 25,
colorByPoint: true,
},
},
xAxis: {
title: {
text: "Repository",
},
},

yAxis: {
title: {
text: "Forks",
},
},
series: [
{
name: "Cylinders",
data: data,
},
],
};

return (
<div>
<HighchartsReact highcharts={Highcharts} options={options} />
</div>
);
};

export default ChartComponent;

除此之外,我还在标签中的/public/index.html 中导入了所有脚本

 <body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/cylinder.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
</body>

有人可以帮助我解决这个问题吗?

最佳答案

需要像highcharts-3d一样加载和初始化cylinder模块:

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import highcharts3d from "highcharts/highcharts-3d";
import cylinder from "highcharts/modules/cylinder";

highcharts3d(Highcharts);
cylinder(Highcharts);

文档: https://www.npmjs.com/package/highcharts-react-official#how-to-add-a-module

关于javascript - 带有 ReactJS 的 Highcharts 3D 圆柱体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63111427/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com