react-highcarts 使用 es6 出现一些错误

Question

我是 React 库和 es6 的新手，我尝试构建一个显示数据的图表。我从创建 React 应用程序模板开始，然后我决定使用 highchart 并开始使用他们的 xrange 图表。我正在使用 https://github.com/kirjs/react-highcharts 库。

我的代码如下：

import React, { Component } from 'react'

import ReactHighcharts from 'react-highcharts';

class Graph extends Component {
    constructor() {
        super();
        this.state = {
            config:  {
                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,
                    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
                    }
                }]

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


export default Graph

我的最终设计是导入默认模板并注入组件属性，如标题和数据，使其更加灵活。

我遇到了 2 个错误（我只是从 highcharts 网站复制了 xrange 图）：

错误：Highcharts 错误 #17：www.highcharts.com/errors/17
TypeError: 无法读取未定义的属性 'destroy'

Answer 1

跟随错误linkhttps://www.highcharts.com/errors/17哪个状态

This error happens when you are setting chart.type or series.type to a series type that isn't defined in Highcharts. A typical reason may be that your are missing the extension file where the series type is defined, for example in order to run an arearange series you need to load the highcharts-more.js file.

导入highcharts更多js

import ReactHighcharts from 'react-highcharts';
import xrange from 'highcharts/modules/xrange';
(xrange)(ReactHighcharts.Highcharts)

Stackblitz demo

react-highcarts 使用 es6 出现一些错误

react-highcarts using es6 getting some errors

javascript

reactjs

highcharts

ecmascript-6

react-highcharts