点击按钮更新React Chart JS选项失败，出现属性未定义报错

问题分析 #

你直接操作Chart类的options属性导致报错，Chart是Chart.js的类本身没有options属性，正确做法是操作图表实例的配置。另外React组件依赖状态驱动更新，直接修改类属性不符合React渲染机制，所以更新不会生效。

修复方案 #

方案1：使用Ref获取图表实例直接更新 #

通过useRef获取Scatter组件的图表实例，直接修改实例配置并调用update：

import React, { useRef } from "react";
import { Chart } from "chart.js";
import Grid from "@mui/material/Grid";
import { Scatter } from "react-chartjs-2";
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";

import ChartDataLabels from "chartjs-plugin-datalabels";
Chart.register(ChartDataLabels);

const EventChart = ({ sId }) => {
  // 创建ref存储图表实例
  const chartRef = useRef(null);

  function handleValueChkChange() {
    // 获取图表实例
    const chartInstance = chartRef.current?.chartInstance;
    if (chartInstance) {
      // 修改实例的配置
      chartInstance.options.plugins.datalabels.display = !chartInstance.options.plugins.datalabels.display;
      // 调用实例的update方法更新图表
      chartInstance.update();
    }
  }

  return (
    <Grid item xs={12}>
      <FormGroup>
        <FormControlLabel
          onChange={handleValueChkChange}
          control={<Checkbox />}
          label="Values"
        />
      </FormGroup>
      {chartData && (
        <Scatter
          ref={chartRef} // 将ref绑定到Scatter组件
          style={{ width: "70%", height: "70%" }}
          data={chartData}
          options={options}
        />
      )}
    </Grid>
  );
};

export default EventChart;

方案2：使用React状态驱动更新（推荐） #

更符合React状态管理逻辑，通过修改状态让组件重新渲染，自动更新图表：

import React, { useState } from "react";
import { Chart } from "chart.js";
import Grid from "@mui/material/Grid";
import { Scatter } from "react-chartjs-2";
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";

import ChartDataLabels from "chartjs-plugin-datalabels";
Chart.register(ChartDataLabels);

const EventChart = ({ sId }) => {
  // 用状态管理数据标签的显示状态
  const [showDataLabels, setShowDataLabels] = useState(true);

  // 根据状态动态生成options
  const dynamicOptions = {
    ...options,
    plugins: {
      ...options.plugins,
      datalabels: {
        ...options.plugins.datalabels,
        display: showDataLabels
      }
    }
  };

  function handleValueChkChange() {
    // 切换状态
    setShowDataLabels(prev => !prev);
  }

  return (
    <Grid item xs={12}>
      <FormGroup>
        <FormControlLabel
          onChange={handleValueChkChange}
          control={<Checkbox checked={showDataLabels} />} // 绑定复选框状态
          label="Values"
        />
      </FormGroup>
      {chartData && (
        <Scatter
          style={{ width: "70%", height: "70%" }}
          data={chartData}
          options={dynamicOptions} // 使用动态生成的options
        />
      )}
    </Grid>
  );
};

export default EventChart;

关键说明 #

• 方案1直接操作实例，适合不需要同步其他组件状态的场景；
• 方案2通过React状态管理，更符合React单向数据流，能自动同步复选框选中状态，推荐使用；
• 避免直接操作Chart类的属性，必须操作具体图表实例或通过状态驱动组件更新。

内容的提问来源于stack exchange，提问作者AddyProg