Javascript 使用es6对highcarts作出反应获得一些错误

我是react库和es6的新手，我尝试构建一个显示数据的图形。我从创建react应用程序模板开始，然后决定使用highchart并开始使用他们的xrange图形。 我正在使用图书馆

我的代码如下所示：

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

import React，{Component}来自“React”
从“react highcharts”导入react highcharts；
类图扩展组件{
构造函数（）{
超级（）；
此.state={
配置：{
图表：{
类型：“xrange”
},
标题：{
文本：“Highcharts X-range”
},
xAxis：{
键入：“日期时间”
},
亚克斯：{
标题：{
文本：“”
},
类别：[“原型设计”、“开发”、“测试”]，
对
},
系列：[{
名称：“项目1”，
//点填充：0，
//分组填充：0，
点宽：20，
数据：[{
x:UTC日期（2014年10月21日），
x2:UTC日期（2014年11月2日），
y:0，
第三部分：0.25
}, {
x:UTC日期（2014年11月2日），
x2:UTC日期（2014年11月5日），
y:1
}, {
x:UTC日期（2014年11月8日），
x2:UTC日期（2014年11月9日），
y:2
}, {
x:UTC日期（2014年11月9日），
x2:UTC日期（2014年11月19日），
y:1
}, {
x:UTC日期（2014年11月10日），
x2:UTC日期（2014年11月23日），
y:2
}],
数据标签：{
已启用：true
}
}]
}
}
}
render（）{
const config=this.state.config；
返回(
)
}
}
导出默认图形

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

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

错误：海图错误#17:www.Highcharts.com/errors/17

TypeError:无法读取未定义的属性“destroy”

跟踪错误链接哪个状态

将chart.type或series.type设置为Highcharts中未定义的系列类型时，会发生此错误。一个典型的原因可能是缺少定义系列类型的扩展文件，例如，为了运行arearange系列，需要加载highcharts-more.js文件

导入更多js

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

---

非常感谢！你们知道通过点击Y轴类别触发事件的方法吗？这篇文章有效，但不在react中。添加新的帖子，有人可能会有所帮助