当窗口调整大小事件触发时，Highcharts 复选框会成倍增加

Question

我有一个应用程序，其中包含图表底部的复选框（通过图例项）。

当我调整应用程序窗口大小时，事件侦听器（记录“调整大小”事件）会相应地更改图表宽度，并且图表上会出现一个新复选框。

当图表主题改变时，也会出现一个新的复选框。

这让我相信，每当重新渲染 Highcharts（我使用 React）时，都会创建一个新的复选框。

一开始只有一个复选框：

单次调整页面大小后：

多次调整大小后：

此外，图表右上角总是有一个复选框（在第一次调整大小后出现）：

复选框仅在 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 中，我使用第 n 个子属性将第二个复选框的显示设置为无（因为 resize 事件总是创建第二个复选框，因此无法关闭它（可能是来自 highcharts 的错误））。

这是我的解决方案。