带有 ReactJS 的 Highcharts 3D 圆柱体

Question

我试图在我的 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>

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

Answer 1

您需要像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

带有 ReactJS 的 Highcharts 3D 圆柱体

Highcharts 3D cylinder wiht ReactJS

javascript

reactjs

highcharts

react-highcharts