我在 StackOverflow 和 GitHub 上发现了许多其他问题,但没有一个对我有用......
我有一个使用 ChartJS 构建的图表。当我单击任何条形(橙色、绿色或红色)时,我想获得相应的值。有什么办法可以实现这一点吗?我使用的 npm 包是react-chartjs-2。我发现它有 2 个道具可能会有帮助,但不知道在这种情况下如何使用它。它们是getElementsAtEvent和onElementsClick。这些道具在使用时会提供大量数据,除了我刚刚单击的栏的值。
这就是我导入组件的方式
import { Bar } from "react-chartjs-2";
这就是我使用该组件的方式
<Bar
data={barData}
height={275}
options={{
maintainAspectRatio: false,
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
}}
/>;
Run Code Online (Sandbox Code Playgroud)
变量barData如下:
const barData = {
labels: [
"04-07-2020",
"05-07-2020",
"06-07-2020",
"07-07-2020",
"08-07-2020",
"09-07-2020",
"10-07-2020",
],
datasets: [
{
label: "Cases",
borderWidth: 1,
backgroundColor: "#ffc299",
borderColor: "#cc5200",
hoverBackgroundColor: "#ed873e",
hoverBorderColor: "#e35f00",
data: [673165, 697413, 719664, 742417, …Run Code Online (Sandbox Code Playgroud)