1

我是反应库和 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 图表）：

  1. 错误：Highcharts 错误 #17：www.highcharts.com/errors/17

  2. TypeError：无法读取未定义的属性“销毁”

4

1 回答 1

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 演示

于 2018-04-13T18:23:27.457 回答