Флажки Highcharts умножаются, когда срабатывает событие изменения размера окна

Question

У меня есть приложение, которое содержит флажок внизу графика (по элементу легенды).

Когда я изменяю размер окна приложения, прослушиватель событий (который регистрирует события 'resize') соответствующим образом меняет ширину диаграммы, и на диаграмме появляется новый флажок.

Также появляется новый флажоккогда тема графика меняется.

Это заставляет меня поверить, что всякий раз, когда Highcharts перерисовываются (я использую React), создается новый флажок.

Изначально есть только один флажок:

После однократного изменения размера страницы:

После нескольких размеров:

Кроме того, всегда есть один флажок в правом верхнем углудиаграммы (появляется после первого изменения размера):

CheckBox добавляется на диаграмму только один раз, в цикле componendDidMount ().Он добавляется в одну серию с использованием этой опции:

showCheckbox: true

Первый и единственный раз, когда функция, которая генерирует диаграммы и задает эту опцию, вызывается в цикле главных компонентов componentDidMount:

Основной контейнер

import Charts from './Charts';
import * as highcharts from 'highcharts';

class MainComponent exteds React.Component<Props, State> {

    public async componentDidMount() {
        try {
            // Here the charts are generated
            const initialOpts = Charts.generateCharts(); 

            const min = 1000;
            const max = 5000;
            highcharts.charts.map(chart => {
                chart.xAxis[0].setExtremes(min, max, undefined, false)
            });
        } catch { ... }
        this.chartDimensionsHandler();
        window.addEventListener('resize', this.chartDimensionsHandler);
    }

    private chartDimensionsHandler() {
        const chartHeight: number = ZoomService.getChartHeight();
        this.setState({ chartHeight }); 
        // When the state is set, component re-renders and causes the issue
    }
    /* 
    Theme is passed as props to the main component thus whenever theme changes, 
    new props arrive and component along with higcharts is also 
    re-rendered what causes a new checkbox to appear on top right of the chart
    */
}

Класс диаграмм

export class ChartService {
    public generateCharts() {
        return this.charts.map((char) => this.generateDataChart(chart));
    }



    private generateDataChart(chart: Chart): Options {
        const { slices } = chart;
        const xValues = slices.map(slice =>
          Number(slice[chart.xAxis.name].value)
        );
        const xAxis = this.generateXAxisOptions(chart);
        const yAxis = [ ... ];

        const options = { xAxis, yAxis };

        // Create line series
        try {
          const lineSeries = this.constructDataSeries(chart, xValues);

          // Create events series
          const eventsCharts = this.charts.filter(
            x => x.type === 'events'
          );
          const eventsSeries = eventsCharts.map((evChart: Chart) => {
            // Here I call a function which sets 'showCheckbox' to true
            const allEvents = this.createEventSeries(evChart!)[0];
            allEvents.yAxis = 1;
            return allEvents;
          });

          const otherSeries = ...; // Irrelevant code

          // Add all series
          const series = [...otherSeries, ...eventsSeries];
          return Object.assign(options, { series });
        } catch (e) {
          return Object.assign(
            options,
            { series: [] },
            {
              lang: {
                noData: `Fail.`
              }
            }
          );
        }
      }

  private constructEventSeries(chart) {
    const { slices, yAxis, xAxis } = chart;
    const xValues = slices.map(slice =>
      Number(slice[xAxis.name].value)
    );

    return yAxis.map((item) => ({
      name: item.label,
      type: 'line',
      data: this.convertEventData(slices, xValues),
      lineWidth: 0,
      showCheckbox: true, // THE PLACE WHERE I SET showCheckbox to true
      marker: {
        enabled: true,
        radius: 10,
        symbol : 'circle'
      },
      meta: {
        type: 'events'
      }
    }));
  }

}

Кто-нибудь имеет представление, почему новый флажок добавляется на диаграмму при каждом его отображении (независимо от того,если график изменен или нет)?

Answer 1

Я обнаружил, что всякий раз, когда регистрируется событие resize, Highcharts автоматически вызывает функцию chart.reflow(), что приводит к умножению контрольных отметок.Функция setState компонента еще больше усугубила ситуацию.

Изменив функцию, вызываемую событием, из установки состояния компонента в настройку размеров диаграммы непосредственно с помощью функции Higcharts chart.setSize(width, height, animation: boolean).

Затем в CSS я установил отображение второго флажка в значение none, используя свойство nth child (потому что событие resize всегда создает второй флажок, его невозможно закрыть (возможно, ошибка в highcharts))).

Это было мое решение.