Ошибка при рендеринге диаграммы x-диапазона React highcharts

Я пытаюсь воссоздать демонстрационную диаграмму highcharts x-range (https://www.highcharts.com/demo/x-range) с использованием официальной оболочки React, и я получаю сообщение об ошибке ReferenceError: Highcharts is not defined. Я новичок в реакциях и высоких диаграммах, поэтому не уверен, что мне здесь не хватает

вот код:

import React, { useState } from 'react';

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const AccountContractHistory = (props) => {

    const [chartOptions, setChartOptions] = useState({
        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,
            borderColor: 'gray',
            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
            }
        }],
      });

  
    return (
        <div>
                    <HighchartsReact
                        highcharts={Highcharts}
                        options={chartOptions}
                    />
        </div>
    )
};

export default AccountContractHistory;

Был бы признателен за любую помощь в выяснении того, что я делаю неправильно

Спасибо

См. также:  Создайте запрос TFS для фильтрации невыполненных работ или задач
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 2
  1. jay queue

    Вы можете найти демонстрацию этой диаграммы в React здесь: https://stackblitz.com/edit/react-highcharts-xrange-demo

    Вы должны не забыть правильно загружать модули highcharts: https://github.com/highcharts/highcharts-react#how-to-add-a-module

  2. jay queue

    Увидев ту же ошибку, но (используя Typescript) для моего исправления, мне нужно было передать Highcharts в xrange следующим образом:

    import Highcharts from 'highcharts';
    import HighchartsReact from 'highcharts-react-official';
    import xrange from 'highcharts/modules/xrange';
    xrange(Highcharts);
    

    а затем разметка:

    <HighchartsReact
      highcharts={Highcharts}
      options={options}
      {...this.props}
    />
    
    
       
    
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: