Пузырьковый график с NextJS и highcharts-реагировать-официальный - PullRequest
Новая
       5

Пузырьковый график с NextJS и highcharts-реагировать-официальный

0 голосов
/ 10 декабря 2018

Коротко: я использую Next-JS с официальным пакетом highcharts-реагировать-официально.Нужно заставить его работать с highcharts-more, но я не могу.

- более подробное объяснение ниже

Я делаю приложение с NextJS, которое в основном React.Я с успехом использовал много разных элементов графика, таких как линия / сплайн / область / разброс / столбец и т. Д. Теперь мне нужно было добавить пузырьковые диаграммы, и, таким образом, мне кажется, что мне нужны высокие диаграммы-больше.

Я пыталсяприменяя HighchartsMore как это (как предложено в https://github.com/highcharts/highcharts-react/issues/16):

import Highcharts from 'highcharts'
import HC_More from 'highcharts/highcharts-more'
import HighchartsReact from 'highcharts-react-official'

HC_More(Highcharts)

, и я не изменил код для диаграмм в методе рендеринга, так как он работал для всех других типов диаграмм: 

class BaseChart extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <figure className="figure w-100">
                <HighchartsReact 
                    highcharts={Highcharts}
                    options={this.props.options}
                />
                <style jsx>{`
                    figure {
                        margin-top: 3em;
                        margin-bottom: 3em;
                    }
                `}</style>
            </figure>
        );
    }
}

Без линий HC_More я получаю ошибку № 17, поскольку «пузырьковых» диаграмм не существует, однако со строками я получаю: 

Uncaught (in promise) Error: n is not a function
    at C:\(...)\node_modules\highcharts\highcharts-more.js:8:280
    at C:\(...)\node_modules\highcharts\highcharts-more.js:11:268
    at Module../app/(...)/BaseChart.js

Я писал об этом в официальных хай-чартах-Пакет реагирует (https://github.com/highcharts/highcharts-react/issues/76),, и другой пользователь добавил следующее:

Я получаю то же самое. Мне интересно посмотреть, как это разрешается.

Следующеешаги заставляют это работать, но это не идеально, и я все еще хотел бы иметь лучшее разрешение.

  1. Я должен выполнить следующие операции импорта (но закомментируйте вызов обратного вызова HC_more). 
import Highcharts from 'highcharts' //core
import HighchartsReact from 'highcharts-react-official';
import HC_more from 'highcharts/highcharts-more.src' //module
// HC_more(Highcharts) //init module
  1. Выполните npm start и перейдите на страницу, содержащую мою пузырьковую диаграмму.Это приведет к ошибке 17, как описано выше: 
Error: Highcharts error #17:
  1. Пока React и Node все еще смотрят, я освобождаю ранее прокомментированную строку: 
HC_more(HighCharts)

Тогда это работает.

Это должно работать с самого начала, но без выполнения вышеуказанных шагов.

1 Ответ

0 голосов
/ 12 декабря 2018

Эта проблема вызвана NextJS, и это известная проблема: https://github.com/zeit/next.js/wiki/FAQ#i-use-a-library-which-throws-window-is-undefined

Простое решение - поместить все модули модулей в if, проверяя, является ли Highcharts объектом или функцией: 

if (typeof Highcharts === 'object') {
    HC_More(Highcharts)
}

Проблема на github: https://github.com/highcharts/highcharts-react/issues/76

...