Пользовательская шкала оси Y в Highcharts React

Я использую диаграммы highcharts для отслеживания тенденций в моем коде реакции. При начальной загрузке страницы диаграмма пуста. Пользователь может добавлять любой тип серии во время выполнения. На основе добавленной серии на график добавляется соответствующая ось y, можно добавить до 3 осей y. Я хочу открыть модальное диалоговое окно с минимальными максимальными входами для каждой оси y на диаграмме и вручную установить минимальное максимальное значение для каждой оси y. Я уже могу этого добиться, но с некоторыми хитростями.

Есть ли способ в React, что когда диаграмма полностью загружена со всеми добавленными осями Y, я мог бы щелкнуть кнопку и открыть модальное диалоговое окно? Метод рендеринга не всегда выполняется, когда ряды добавляются или удаляются с диаграммы, поэтому модальное диалоговое окно не знает, сколько осей присутствует на диаграмме.

Пожалуйста, дайте мне знать, возможно ли отобразить модальное диалоговое окно при нажатии кнопки (я не могу предварительно отобразить его, пока выполняется метод визуализации).

Спасибо.


reactjs scale highcharts yaxis
person V.B    schedule 19.03.2019    source источник
comment
Привет @ V.B, Вы пробовали использовать события Highcharts? График load или render событий должен решить проблему.   -  person ppotaczek    schedule 19.03.2019
comment
Нет, я еще не сделал этого, но как мне отрендерить что-либо в событии визуализации диаграммы? Событие рендеринга родительского компонента уже запущено? Пожалуйста, поправьте меня, если я ошибаюсь   -  person V.B    schedule 19.03.2019
comment
Это зависит от того, как вы используете React. Пожалуйста, проверьте этот пример: codeandbox.io/s/2x0kpxkoxn, в нем показано, как получить ссылку на компонент в событиях графика.   -  person ppotaczek    schedule 20.03.2019
comment
Большое спасибо за вашу помощь. Я попробую.   -  person V.B    schedule 20.03.2019
comment
Нет проблем, дайте мне знать, если ваша проблема решена.   -  person ppotaczek    schedule 20.03.2019
comment
Привет, я использовал метод рендеринга диаграммы, который помог. Большое спасибо   -  person V.B    schedule 21.03.2019

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете получить ссылку на компонент React в функциях событий диаграммы и использовать ее для рендеринга некоторых элементов:

chart: {
  events: {
    render: function() {
      ...
      // use React to render something
    }.bind(this)
  }
},

Живая демонстрация: https://codesandbox.io/s/2x0kpxkoxn

Справочник по API: https://api.highcharts.com/highcharts/chart.events.render

person ppotaczek    schedule 21.03.2019