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

Question

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

我为图形激活了 dragData，该部分有效，图形允许您拖动数据。当我单击按钮禁用拖动选项时出现问题，图形不起作用，它仍然允许拖动值。

显然在控制台中图形的选项发生了变化，但它并没有反映在图形的交互中，我将代码留在下面link。

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])

...看起来你必须以某种方式强制 redraw/rerendering.

其中一个选项是更改传递给 <Line /> 的整个 options 道具。您可以使用 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 prop，它至少会误导...尤其是当你要转换这个组件时至 class.

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

options changes not seen in react chartjs 2

reactjs

charts

react-chartjs