react-highcharts как вызвать перекомпоновку?

Я использую плагин kirjs/react-highcharts для реакции, но понятия не имею, как получить компонент Highchart в чтобы позвонить reflow, например: $('#container1').highcharts().reflow()

Из документов это говорит:

Для доступа к методам и свойствам из библиотеки Highcharts вы можете использовать ReactHighcharts.Highcharts. Например, параметры Highcharts доступны через ReactHighcharts.Highcharts.getOptions().

но я не вижу там никакого reflow() метода.

Любые идеи?

Изменить

он находится под ReactHighcharts.Highcharts.charts, так что я могу позвонить

ReactHighcharts.Highcharts.charts[0].reflow()

но у него есть список всех экземпляров highchart, поэтому у меня нет информации, какой индекс у меня


reactjs highcharts react-highcharts
person snaggs    schedule 12.05.2016    source источник
comment
Вы можете использовать Highcharts с React без этого плагина, как показано в этой официальной статье Highcharts: highcharts.com/blog/ Для плагина, который вы используете, текст в документации сразу после того, который вы разместили, касается chart.series[0].addPoint(... и chart.reflow(), следует использовать аналогичным образом.   -  person Kacper Madej    schedule 12.05.2016

Ответы (2)


arrow_upward
1
arrow_downward

Я использую highcharts-react-official и highcharts. Они доступны через npm. Хотя я использую разные пакеты, принцип работы должен быть одинаковым.

Способ использования функции reflow() в react-highchart также Highcharts.charts[i].reflow(). Для демонстрации я подготовил 2 песочницы кода. Первая изолированная программная среда кода показывает способ перекомпоновки каждой диаграммы, а вторая изолированная программная среда кода показывает способ перекомпоновки конкретной диаграммы.

Первая ссылка на песочницу кода: здесь.

  1. В App.js есть кнопка, позволяющая скрывать и отображать элементы div highchart.
  2. Дочерним компонентом является React.memo (для оптимизации производительности), поэтому размер скрытого highchart не будет автоматически изменен после того, как он станет видимым.
  3. Разрешить изменять размер каждого окна графика относительно размера окна. Следующий код размещен в App.js. Он ищет все существующие диаграммы и перестраивает их:
    for (var i = 0; i < Highcharts.charts.length; i++) {
      if (Highcharts.charts[i] !== undefined) {
        Highcharts.charts[i].reflow();
      }
    }

Вторая ссылка на песочницу кода: здесь.

  1. Почти то же самое, что и первая песочница кода, но есть массив ссылок на каждую диаграмму.
  2. Диаграмма, которая нуждается в перетекании, помещается с идентификатором в параметре диаграммы.
  3. Повторите каждую диаграмму и получите индекс диаграммы с этим идентификатором, например. secondChart для этого примера.
    for (var i = 0; i < chartRef.current.length; i++) {
      if (
        chartRef.current[i].chart.userOptions.id !== undefined &&
        chartRef.current[i].chart.userOptions.id === "secondChart"
      )
        Highcharts.charts[chartRef.current[i].chart.index].reflow();
    }
  1. Перерисуйте эту диаграмму.
person Chee Conroy    schedule 01.10.2020

arrow_upward
0
arrow_downward

Перекомпоновку можно настроить с помощью события load в настройках.

Обходной путь: вы должны установить reflow() с помощью setTimeout(), это вызовет изменение размера. Время установлено на 0, чтобы избежать задержки.

Решение

const options = {
    chart: {
      type: 'column',
      style: {},
      events: {
        load() {
          setTimeout(this.reflow.bind(this), 0);
        },
      },
    },
    title: 'Column Chart',
  }

Использование

<HighchartsReact highcharts={Highcharts} options={options} />
person Deepak Kadarivel    schedule 12.03.2021