如何在条形图2中显示数据值？
如何在条形图2中显示数据值？
提问于 2021-05-23 09:29:08
我在反应图2中做了条形图。我想在条形图顶部显示每个条形图的数据值。为此，我使用了插件调用chartjs-plugin-datalabels，但它没有显示任何东西。
是否可以显示条形图的每个值？
我想显示数据的价值，像这样的东西。
这是我的密码。
import React, { Component } from "react";
import "chartjs-plugin-datalabels";
import { Bar } from "react-chartjs-2";
export default class Button extends Component {
render() {
const dataBar = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: "#EC932F",
borderColor: "rgba(255,99,132,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
const options = {
plugins: {
datalabels: {
display: true,
color: "black"
}
},
legend: {
display: false
}
};
return (
<div>
<Bar data={dataBar} options={options} width={100} height={50} />
</div>
);
}
}任何帮助都将不胜感激。
回答 4
Stack Overflow用户
发布于 2022-01-20 07:17:46
import React, { Component } from "react";
import Chart from "chart.js/auto";
import ChartDataLabels from "chartjs-plugin-datalabels";
import { Bar } from "react-chartjs-2";
export default class Button extends Component {
componentDidMount() {
Chart.register(ChartDataLabels);
}
render() {
const dataBar = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: "#EC932F",
borderColor: "rgba(255,99,132,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
const options = {
plugins: {
datalabels: {
display: true,
color: "black",
formatter: Math.round,
anchor: "end",
offset: -20,
align: "start"
}
},
legend: {
display: false
}
};
return (
<div>
<Bar data={dataBar} options={options} width={100} height={50} />
</div>
);
}
}在这里，您可以看到在componentDidMount中，我们有注册图表数据标签插件来显示数据。另一件事是在选项中添加了更多的参数，如下面的字段所示
anchor: "end",
offset: -20,
align: "start"这用于在顶部显示数据。
Stack Overflow用户
发布于 2022-01-20 02:45:23
react-chartjs-2包拥有一个可以在组件上设置的插件属性.
从以下位置更改导入：
import "chartjs-plugin-datalabels";至：
import ChartDataLabels from 'chartjs-plugin-datalabels';在组件上，添加包含导入值的插件变量。
发自：
<Line data={data} options={options} />至：
<Line data={data} plugins={[ChartDataLabels]} options={options} />请参阅这个类似问题的original stackoverflow answer
Stack Overflow用户
发布于 2021-07-21 09:50:09
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67658205
复制相关文章
相似问题
腾讯云开发者
