在 react chartjs 2 中看不到选项更改

Question

我在 react-chartjs-2 中更新图表选项时遇到问题，恰好在 chartjs 的 dragData 插件中

我为图表激活了 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])

working code

Answer 1

根据这个thread，这个库中仍然存在问题。

除了缩短代码的明显选项...

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

...看来您必须以某种方式强制重绘/重新渲染。

其中一个选项是将整个 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}
  />

working example

当然你可以在初始状态下使用props.state 值...还可以考虑重命名state 属性，这至少会产生误导...尤其是当您将此组件转换为类时。