gpt4 book ai didi

javascript - 如何使用 chart.js 在图条上方显示值标签

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:46:54 33 4
gpt4 key购买 nike

我正在使用 chart.js,我想在条形上方显示标签值,那么该怎么做呢?

var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [65, 59, 90, 81, 56, 55, 40],
}]
}

最佳答案

我遇到了同样的问题,决定写出来。请从我在 github 上的 fork 版本获取我的 chart.js 版本:Chart.js

您可以传递以下选项:

var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [65, 59, 90, 81, 56, 55, 40],
}]
};
var opts = {
scaleShowValues: true,
scaleValuePaddingX: 13,
scaleValuePaddingY: 13
};
var chrt = document.getElementById('chrtDemo').getContext('2d');
new Chart(chrt).Bar(barChartData, opts);

scaleValuePaddingX 和 scaleValuePaddingY 会移动值的位置,以便您对其进行微调。

您还可以传递一个颜色数据集来单独为每个条形着色:

var barChartData = {
labels: ["January", "February", "March"],
datasets: [{
fillColor: ["rgba(220,220,220,0.5)", "rgba(220,220,220,0.5)", "rgba(220,220,220,0.5)"],
strokeColor: ["rgba(220,220,220,1)", "rgba(220,220,220,1)", "rgba(220,220,220,1)"],
data: [65, 59, 90],
}]
};

关于javascript - 如何使用 chart.js 在图条上方显示值标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22856209/

33 4 0