我正在使用 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/