使用es6反應highcarts出現一些錯誤

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

我的最終設計將是導入默認模板，並注入諸如title和data之類的組件屬性，以使其更加靈活。

即時通訊出現2個錯誤（我只是從highcharts網站復制了xrange圖）：

1. 錯誤：Highcharts錯誤＃17：www.highcharts.com/errors/17

2. TypeError：無法讀取未定義的屬性“ destroy”

Answer 1

遵循錯誤鏈接https://www.highcharts.com/errors/17 ，其中指出了

當您將chart.type或series.type設置為Highcharts中未定義的系列類型時，會發生此錯誤。 一個典型的原因可能是您缺少定義系列類型的擴展文件，例如，要運行一個Arearange系列，您需要加載highcharts-more.js文件。

導入highcharts更多js

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

Stackblitz演示