0

onPan当从 useEffect 挂钩内部分配 Chart 配置时，我遇到了 ChartJS 的 Pan/Zoom 插件事件未触发的问题。我正在收听平移和缩放事件并相应地触发事件总线以使多个图表的缩放/平移边界相互同步。onPan只有当onZoom工作完全正常时才会出现问题。

这是一般重要的代码（这都在功能组件中）：

useEffect(() => {
    if(applicableEffectCondition.isMet) {
      return; // to prevent infinite loop
    }

    // do code magic ...

    function dispatchInteractEvent(reference: MutableRefObject < any | undefined > ) {
        dispatch({
            type: "@@charts/INTERACT",
            payload: {
                sender: reference.current.id,
                x: {
                    min: reference.current.scales.x.min,
                    max: reference.current.scales.x.max,
                },
            }
        });
    }

    const options: ChartOptions = {
        // ...

        plugins: {

            zoom: {
                limits: {
                    // minimum X value & maximum X value
                    x: {
                        min: Math.min(...labelsNumber),
                        max: Math.max(...labelsNumber)
                    },
                },
                zoom: {
                    wheel: {
                        enabled: true,
                        speed: 0.1,
                    },
                    pinch: {
                        enabled: true
                    },
                    mode: 'x',
                    onZoom: () => {
                        alert("I am zooming!");
                        dispatchInteractEvent(chartRef);
                    }
                },
                pan: {
                    enabled: true,
                    mode: 'x',

                    rangeMin: {
                        y: allDataMin
                    },
                    rangeMax: {
                        y: allDataMax
                    },

                    onPan: () => {
                        alert("I am panning!");
                        dispatchInteractEvent(chartRef);
                    }
                }
                as any
            }
        },
    };

    setChartOptions(options); // use state

    const data: ChartData = {
        labels: labelsString,
        datasets: datasetState.getDatasets(),
    };

    setChartData(data); // use state
}, [applicableChannels]);

useBus(
    '@@charts/INTERACT',
    (data) => {
        const payload = data.payload;

        if (payload.sender === chartRef.current.id) {
            return;
        }

        // update chart scale/zoom/pan to be in sync with all others
        chartRef.current.options.scales.x.min = payload.x.min;
        chartRef.current.options.scales.x.max = payload.x.max;

        chartRef.current.update();
    },
    [],
);

return (

      <Chart type={"line"} ref={chartRef} options={chartOptions} data={chartData} />
);

正如您在配置中看到的那样，我放了两个alerts 来通知我何时触发事件。"I am zooming!"被解雇得很好，但从"I am panning!"未被解雇。也没有任何其他泛特定事件。

这是一个非常奇怪的问题。任何帮助，将不胜感激！谢谢！

4

0 回答 0