изменения параметров не видны на графике реакции js 2 - PullRequest
Новая
       23

изменения параметров не видны на графике реакции js 2

0 голосов
/ 30 марта 2020

У меня проблема с обновлением опций диаграммы вact-chart js -2, именно в плагине dragData диаграммы js

У меня активирован dragData для графика, что часть работает, график позволяет перетаскивать данные. Проблема возникает, когда я нажимаю кнопку, чтобы отключить параметр перетаскивания, график не работает, он по-прежнему позволяет перетаскивать значения.

, видимо, в консоли параметры графика меняются, но это не отражается в Взаимодействие графика, я оставляю код в следующей ссылке. 

useEffect(() => {
  if(props.state === true){
    let ref = chartReference.current.chartInstance;
      ref.options.dragData = false;
      ref.update();
  }else {
    let ref = chartReference.current.chartInstance;
    ref.options.dragData = true;
    ref.update();
  }
}, [props.state])

рабочий код

1 Ответ

0 голосов
/ 30 марта 2020

В соответствии с этим потоком проблема все еще может существовать в этой библиотеке.

Помимо очевидного варианта сокращения кода ... 

useEffect(() => {
  let ref = chartReference.current.chartInstance;
  ref.options.dragData = !props.state;
  ref.update();
}, [props.state])

... it Похоже, вам нужно каким-то образом принудительно перерисовать / перерисовать.

Один из вариантов - изменить всю options пропущенную пропозицию <Line />. Вы можете использовать useState, чтобы сохранить этот объект конфигурации - конечно, с перемещением исходного состояния: 

const [chartOptions, setChartOptions] = useState(
    {
      onDragEnd: handleDrag,
      dragData: true,
      dragDataRound: 0,
      ...

useEffect, чтобы реагировать на prop.state изменения: 

useEffect(() => {
  setChartOptions(Chart.helpers.configMerge(chartOptions, {
    dragData: !props.state
    })
  );
}, [props.state])

<Line /> диаграмма требует изменений: 

  <Line
    ref={chartReference}
    data={data}
    height={30}

    options={chartOptions}

    redraw={true}
  />

рабочий пример

Конечно, вы можете использовать значение props.state в исходном состоянии ... также подумайте о переименовании state проп, это может быть по крайней мере ошибочным ... особенно, когда вы преобразуете этот компонент в класс.

...