尝试使用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)
1条答案
按热度按时间bqf10yzr1#
在你的代码中,chart.option是camelCase,而你的Chart对象是PascalCase?
您可以将选项定义为React状态,并在调用更新方法后按需更新状态。
我为你的问题实现了一个示例代码,它将工作:Sample Code