我已经使用react-chartjs-2用于一些条形图图表,我正在创建onClick函数,例如,当我们单击特定条形图时,函数应使用与文档链接https://react-chartjs-2.js.org/docs/working-with-events/中提到的相同的方法工作
但它在引用我代码时显示错误
import React,{useRef} from "react";
import {
Chart as ChartJS,
BarElement,
Tooltip,
LinearScale,
CategoryScale,
ChartEvent
} from "chart.js";
import { Bar,getDatasetAtEvent } from "react-chartjs-2";
import { ChartJSOrUndefined } from "react-chartjs-2/dist/types";
ChartJS.register(BarElement, Tooltip, LinearScale, CategoryScale);
const labels = [
"January",
"February",
"January",
"February",
"January",
"February",
"January",
"February",
];
export const options = {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
display: false,
},
},
};
export const data = {
labels,
datasets: [
{
label: "Dataset 1",
data: [345, 229, 10, 110, 20, 30, 40, 50],
backgroundColor: "#3F3E57",
barThickness: 60,
borderRadius: 8,
hoverBackgroundColor:"#0661FF"
},
],
};
const Chart = () => {
const chartRef = useRef();
const onClick = (e:React.MouseEvent<HTMLCanvasElement, MouseEvent>) => {
console.log(getDatasetAtEvent(chartRef.current, e));
}
return (
<div className="chart">
<div className="chart__title">
<h4>Montly Revenue</h4>
<h2>$1500</h2>
</div>
<div className="chart__main">
<Bar options={options} data={data} ref={chartRef} onClick={onClick}/>
</div>
</div>
);
};
export default Chart;
所有工作正常,但在这一点上显示错误//此处
错误记录档
Argument of type 'undefined' is not assignable to parameter of type 'Chart<keyof ChartTypeRegistry, (number | ScatterDataPoint | BubbleDataPoint | null)[], unknown>'.
51 | const chartRef = useRef();
52 | const onClick = (e:React.MouseEvent<HTMLCanvasElement, MouseEvent>) => {
> 53 | console.log(getDatasetAtEvent(chartRef.current, e));
| ^^^^^^^^^^^^^^^^
54 | }
55 | return (
56 | <div className="chart">
我已经搜索了很多,但没有得到类似的错误
1条答案
按热度按时间syqv5f0l1#
解决方案是在useRef中使用任何类型,这样它就可以获取任何类型的引用,这样代码就变成