react-highcarts с использованием es6 получает некоторые ошибки

Я новичок в библиотеке реагирования и es6, и я попытался построить график, отображающий данные. Я начал с создания шаблона приложения для реагирования, а затем решил использовать 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 ошибки (я просто копирую график xrange с сайта highcharts):

  1. Ошибка: ошибка Highcharts № 17: www.highcharts.com/errors/17

  2. TypeError: невозможно прочитать свойство «уничтожить» неопределенного


reactjs javascript ecmascript-6 highcharts react-highcharts
person Elad Motola    schedule 13.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Перейдите по ссылке на ошибку https://www.highcharts.com/errors/17, в которой указано

Эта ошибка возникает, когда вы устанавливаете для chart.type или series.type тип серии, который не определен в Highcharts. Типичная причина может заключаться в том, что вам не хватает файла расширения, в котором определен тип серии, например, чтобы запустить серию площадей, вам нужно загрузить файл highcharts-more.js.

Импортировать highcharts больше js

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

демонстрация Stackblitz

person Deep 3015    schedule 13.04.2018
comment
Большое спасибо! Знаете ли вы какой-либо способ вызвать событие при нажатии на категории оси Y? - person Elad Motola; 23.04.2018
comment
этот пост работает stackoverflow.com/a/31737990/3898339, но не реагирует. Добавьте новый пост, может кому поможет - person Deep 3015; 23.04.2018