Question

我在工作中使用React，我们正在使用Google Charts展示一些数据。现在可以正常显示数据了。可以通过选中某些复选框来过滤一堆数据点。

当您单击一个复选框时，将重新评估整个数据集，以便取出与过滤器不匹配的条目。然后，将过滤后的数据放入一个单独的集合中，然后再将该过滤后的数据集放回Chart对象中进行显示。

现在，当不应用任何过滤器并显示所有数据时，onmousedown事件将完全正常触发。就一次。但是，当我应用一个过滤器（或实际上是任意数量的过滤器）时，onmousedown事件会多次触发。有时候，事件会从我未点击的点返回数据。但是每次它还会返回我确实单击过的数据，只是多次。

我不太了解这种行为：

<Chart
chartType="ScatterChart"
width="100%"
height="480px"
loader={<div>Loading Chart</div>}
data={filteredData}
options={chartOptions}
rootProps={{ 'data-testid': '1' }}
chartEvents={[
  {
    eventName: 'ready',
    callback: ({ chartWrapper, google }) => {
      const chart = chartWrapper.getChart();
      google.visualization.events.addListener(
        chart,
        'onmousedown',
        e => {
          const { targetID } = e;
          if (targetID.includes('point')) {
            const tableEntry = FlowUtil.getChartEntryOnClick(
              filteredData,
              targetID,
            );
            handleOnMouseClick(tableEntry);
          }
        },
      );
    },
  },
]}
/>

是因为我需要使用其他事件，还是因为我对事件的处理都错了？还是因为我要更改数据而导致缓存是罪魁祸首？我在这里有点想法。

Answer 1

事件被多次触发，
因为它被多次添加了，
每当图表的'ready'事件触发时。

在添加侦听器之前，请删除所有先前添加的侦听器，
通过使用-> google.visualization.events.removeAllListeners(chart);

请参阅以下代码段...

chartEvents={[
  {
    eventName: 'ready',
    callback: ({ chartWrapper, google }) => {
      const chart = chartWrapper.getChart();

      google.visualization.events.removeAllListeners(chart);

      google.visualization.events.addListener(
        chart,
        'onmousedown',
        e => {
          const { targetID } = e;
          if (targetID.includes('point')) {
            const tableEntry = FlowUtil.getChartEntryOnClick(
              filteredData,
              targetID,
            );
            handleOnMouseClick(tableEntry);
          }
        },
      );
    },
  },
]}

OnMouseDown在Scatterplot中触发多次

1 个答案: