渲染 React highcharts x-range 图表时出错答案

【问题标题】：Error in rendering a React highcharts x-range chart渲染 React highcharts x-range 图表时出错
【发布时间】：2021-05-14 07:23:08
【问题描述】：

我正在尝试使用官方 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;

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

谢谢

【问题讨论】：

标签： reactjs highcharts

【解决方案1】：

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

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

【讨论】：

【解决方案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}
/>

【讨论】：