如何使用 react-highcharts 绘制钟形曲线答案

【问题标题】：How to use react-highcharts to plot bell curve如何使用 react-highcharts 绘制钟形曲线
【发布时间】：2020-02-09 03:44:49
【问题描述】：

我正在使用 react-highcharts 绘制条形图、甜甜圈图和钟形曲线图。在绘制其他图表时，我无法使用 react-highcharts 绘制钟形曲线图。用于 highcharts 的 React 包是 https://www.npmjs.com/package/react-highcharts

这是我的实现：

import React, { Component } from "react";
import ReactHighCharts from "react-highcharts";

    class BellCurve extends Component {
      constructor(props) {
        super(props);

        this.state = {
          config: {
            title: {
              text: null,
            },

            legend: {
              enabled: false,
            },

            xAxis: [
              {
                title: {
                  text: "Data",
                },
                visible: false,
              },
              {
                title: {
                  text: "Bell curve",
                },
                opposite: true,
                visible: false,
              },
            ],

            yAxis: [
              {
                title: {
                  text: "Data",
                },
                visible: false,
              },
              {
                title: {
                  text: "Bell curve",
                },
                opposite: true,
                visible: false,
              },
            ],

            series: [
              {
                name: "Bell curve",
                type: "bellcurve",
                xAxis: 1,
                yAxis: 1,

                intervals: 4,
                baseSeries: 1,
                zIndex: -1,
                marker: {
                  enabled: true,
                },
              },
              {
                name: "Data",
                type: "scatter",
                data: [
                  0.0,
                  0.0,
                  0.0,
                  1.32,
                  1.0,
                  0.74,
                  0.43,
                  0.48,
                  0.14,
                  -0.21,
                  -0.22,
                  -0.28,
                  0.06,
                  0.04,
                  0.13,
                  0.07,
                  0.07,
                  0.04,
                  -0.05,
                  0.2,
                  0.14,
                  -0.05,
                  -0.11,
                  -0.26,
                  -0.21,
                  -0.02,
                  0.29,
                  0.21,
                ],
                visible: false,
                marker: {
                  radius: 1.5,
                },
              },
            ],
          },
        };
      }

      render() {
        return <ReactHighCharts config={this.state.config} />;
      }
    }

    export default BellCurve;

在运行上述代码时，出现以下错误： Cannot read property 'destroy' of undefined

关于如何修复此错误的任何建议？

【问题讨论】：

标签： reactjs highcharts react-highcharts

【解决方案1】：

钟形曲线需要以下模块modules/histogram-bellcurve.js.here

你应该导入bellcurve

import bellcurve from 'highcharts/modules/histogram-bellcurve';
(bellcurve)(ReactHighCharts.Highcharts)

sample

【讨论】：

Nishant_061，如果代码与您的问题不同，请更新您的代码。

【解决方案2】：

正如上面答案中提到的钟形曲线系列需要导入钟形曲线模块。

使用您的配置进行演示：https://codesandbox.io/s/highcharts-react-demo-15ojj

【讨论】：