OnMouseDown запускается более одного раза в Scatterplot - PullRequest
Новая
       5

OnMouseDown запускается более одного раза в Scatterplot

0 голосов
/ 11 февраля 2019

Я использую 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);
          }
        },
      );
    },
  },
]}
/>

Это потому, что мне нужно использовать другойсобытие, или это потому, что я все неправильно обрабатываю?Или это потому, что я изменяю данные, а кеширование является виновником?У меня тут какие-то идеи.

1 Ответ

0 голосов
/ 11 февраля 2019

событие вызывается несколько раз,
, потому что оно добавляется несколько раз,
каждый раз, когда срабатывает событие '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);
          }
        },
      );
    },
  },
]}
...