ChartJS 单击按钮时更新图表JS选项

1l5u6lss  于 2023-05-17  发布在  Chart.js
关注(0)|答案(1)|浏览(177)

尝试使用Chart.update()方法在按钮单击时更新React Chart JS选项。但它不起作用。下面是代码

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

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

const EventChart = ({ sId }) => {

function handleValueChkChange() {
    Chart.options.plugins.datalabels.display= false;
    Chart.update();
  }

 return (
<Grid item xs={12}>

<FormGroup>
            <FormControlLabel
              onChange={handleValueChkChange}
              control={<Checkbox />}
              label="Values"
            />
          </FormGroup>
            {chartData && (
              <Scatter
                style={{ width: "70%", height: "70%" }}
                data={chartData}
                options={options}
              />
            )}
          </Grid>
  );
};

export default EventChart;

错误:

Cannot read properties of undefined (reading 'plugins')
TypeError: Cannot read properties of undefined (reading 'plugins')
    at handleValueChkChange (https://localhost:3000/main.d9e9b2f82ffc9a60a64e.hot-update.js:192:57)
    at handleInputChange (https://localhost:3000/static/js/bundle.js:125996:7)
    at HTMLUnknownElement.callCallback (https://localhost:3000/static/js/bundle.js:216096:18)
    at Object.invokeGuardedCallbackDev (https://localhost:3000/static/js/bundle.js:216140:20)
    at invokeGuardedCallback (https://localhost:3000/static/js/bundle.js:216197:35)
    at invokeGuardedCallbackAndCatchFirstError (https://localhost:3000/static/js/bundle.js:216211:29)
    at executeDispatch (https://localhost:3000/static/js/bundle.js:220355:7)
    at processDispatchQueueItemsInOrder (https://localhost:3000/static/js/bundle.js:220381:11)
    at processDispatchQueue (https://localhost:3000/static/js/bundle.js:220392:9)
    at dispatchEventsForPlugins (https://localhost:3000/static/js/bundle.js:220401:7)
bqf10yzr

bqf10yzr1#

function handleValueChkChange() {
    chart.options.plugins.datalabels.display= false;
    Chart.update();
  }

在你的代码中,chart.option是camelCase,而你的Chart对象是PascalCase?
您可以将选项定义为React状态,并在调用更新方法后按需更新状态。
我为你的问题实现了一个示例代码,它将工作:Sample Code

相关问题