渲染 React highcharts x 范围图表时出错

Question

我正在尝试使用官方 React 包装器重新创建 highcharts x-range 演示图表 (https://www.highcharts.com/demo/x-range)，但出现“ReferenceError: Highcharts is not defined”错误。我是 React 和 highcharts 的新手，所以不确定我在这里遗漏了什么

代码如下：

import React, { useState } from 'react';

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const AccountContractHistory = (props) => {

    const [chartOptions, setChartOptions] = useState({
        chart: {
            type: 'xrange'
        },
        title: {
            text: 'Highcharts X-range'
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: {
                text: ''
            },
            categories: ['Prototyping', 'Development', 'Testing'],
            reversed: true
        },
        series: [{
            name: 'Project 1',
            // pointPadding: 0,
            // groupPadding: 0,
            borderColor: 'gray',
            pointWidth: 20,
            data: [{
                x: Date.UTC(2014, 10, 21),
                x2: Date.UTC(2014, 11, 2),
                y: 0,
                partialFill: 0.25
            }, {
                x: Date.UTC(2014, 11, 2),
                x2: Date.UTC(2014, 11, 5),
                y: 1
            }, {
                x: Date.UTC(2014, 11, 8),
                x2: Date.UTC(2014, 11, 9),
                y: 2
            }, {
                x: Date.UTC(2014, 11, 9),
                x2: Date.UTC(2014, 11, 19),
                y: 1
            }, {
                x: Date.UTC(2014, 11, 10),
                x2: Date.UTC(2014, 11, 23),
                y: 2
            }],
            dataLabels: {
                enabled: true
            }
        }],
      });

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

export default AccountContractHistory;

如果能帮助我找出我做错了什么，将不胜感激

谢谢

Answer 1

您可以在此处找到此图表在 React 中的演示： https://stackblitz.com/edit/react-highcharts-xrange-demo

您必须记住正确加载 highcharts 模块： https://github.com/highcharts/highcharts-react#how-to-add-a-module

Answer 2

看到同样的错误但是（使用 Typescript）为了我的修复我需要像这样将 Highcharts 传递给 xrange：

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import xrange from 'highcharts/modules/xrange';
xrange(Highcharts);

然后是标记：

<HighchartsReact
  highcharts={Highcharts}
  options={options}
  {...this.props}
/>

渲染 React highcharts x 范围图表时出错

Error in rendering a React highcharts x-range chart

highcharts

reactjs