如何使用反应高图绘制钟形曲线

Question

我正在使用反应高图表来绘制条形图，圆环图和钟形曲线图。我无法在绘制其他图表时使用反应高图表绘制钟形曲线图。 用于高图表的 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

关于如何解决此错误的任何建议？

Answer 1

钟形曲线需要以下模块模块/直方图-钟形曲线.js.here

您应该导入bellcurve

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

样本

Answer 2

如上回答所述，钟形曲线系列需要导入钟形曲线模块。

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