React Highcharts 多次触发 setExtremes 事件 [英] React Highcharts firing setExtremes event multiple times

问题描述

我在使用 Hooks 的应用程序中使用 Highcharts React 包装器，当我的图表加载或缩放时，它会分别触发 setExtremes 和 setAfterExtremes 多次.我已经查看过类似的问题，但它们与不同的问题有关.

我已将代码减少到最小设置，页面未刷新，数据仅解析一次并添加到图表中，动画已禁用，但仍持续触发这两个事件 7 次:* 初始人口* 缩放

版本:react 16.9、highcharts 7.2、highcharts-react-official 2.2.2

图表

图表选项:

const [series1, setSeries1] = useState([]);常量选项1 = {图表: {类型:'样条'，缩放类型:'x'，动画:假},标题: {文本: ''},x轴:{事件:{setExtremes: () =>{console.log('EVENT setExtremes');},afterSetExtremes: () =>{console.log('EVENT sfterSetExtremes');}},},绘图选项:{系列: {动画:假}},系列:系列1};

数据人口:

useEffect(() => {如果(数据1){const a = [];_.each(data1.labels, (sLabel) => {a.推({名称:sLabel,数据: []，})});... 填充数据阵列...setSeries1(a);}}, [数据1]);

解决方案

问题比较老我也面临同样的情况.解决方案是将图表选项移动到状态变量.那么该事件将不会多次触发.

它在库文档中提到.https://github.com/highcharts/highcharts-react -- 查看最优更新方式"

import { render } from 'react-dom';从highcharts-react-official"导入 HighchartsReact；从'highcharts'导入Highcharts；const LineChart = () =>{const [hoverData, setHoverData] = useState(null);//状态中的选项const [chartOptions, setChartOptions] = useState({x轴:{类别:['A'，'B'，'C']，事件:{afterSetExtremes: afterSetExtremes,},},系列: [{ 数据:[1, 2, 3] }],});函数 afterSetExtremes(e: Highcharts.AxisSetExtremesEventObject) {handleDateRangeChange(e);}返回 (<div><HighchartsReacthighcharts={Highcharts}选项={图表选项}/>

)}render(<LineChart/>, document.getElementById('root'));```

I am using Highcharts React wrapper in an app using Hooks, when my chart is either loaded or zoomed it fires both setExtremes and setAfterExtremes multiple times each. I've looked through for similar questions but they are related to different issues.

I've reduced the code to the minimum setup, the page is not refreshing, the data is only parsed once and added to the chart once yet, animation is disabled and it's still consistently firing both events 7 times on: * initial population * on zoom

Versions: react 16.9, highcharts 7.2, highcharts-react-official 2.2.2

Chart

<HighchartsReact
  ref={chart1}
  allowChartUpdate
  highcharts={Highcharts}
  options={OPTIONS1}
/>

Chart Options:

const [series1, setSeries1] = useState([]);

const OPTIONS1 = {
    chart: {
      type: 'spline',
      zoomType: 'x',
      animation: false
    },
    title: {
      text: ''
    },
    xAxis: {
      events: {
        setExtremes: () => {
          console.log('EVENT setExtremes');
        },
        afterSetExtremes: () => {
          console.log('EVENT sfterSetExtremes');
        }
      },
    },
    plotOptions: {
      series: {
        animation: false
      }
    },
    series: series1
  };

Data Population:

useEffect(() => {
    if (data1) {
      const a = [];

      _.each(data1.labels, (sLabel) => {
        a.push({
          name: sLabel,
          data: [],
        })
      });

      ... POPULATES DATA ARRAYS...

      setSeries1(a);
    }
  }, [data1]);

解决方案

Rather the question is old I also faced the same situation. The solution is to move the chart options to a state variable. Then the event will not fire multiple times.

It is mentioned on the library docs. https://github.com/highcharts/highcharts-react -- see the "optimal way to update"

import { render } from 'react-dom';
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';

const LineChart = () => {
 
  const [hoverData, setHoverData] = useState(null);
 
  // options in the state
  const [chartOptions, setChartOptions] = useState({
    xAxis: {
      categories: ['A', 'B', 'C'],
      events: {
        afterSetExtremes: afterSetExtremes,
      },
    },
    series: [
      { data: [1, 2, 3] }
    ],
  });

  function afterSetExtremes(e: Highcharts.AxisSetExtremesEventObject) {
    handleDateRangeChange(e);
  }

  return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          options={chartOptions}
        />
      </div>
    )
}

render(<LineChart />, document.getElementById('root'));```

这篇关于React Highcharts 多次触发 setExtremes 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！