如何使用chart.js在图形条上方显示值标签 [英] How to display value labels above graph bars using chart.js
本文介绍了如何使用chart.js在图形条上方显示值标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用chart.js,我想在条形图上方显示标签值,那么它是如何做到的?
I am using chart.js,i want to show the label value above the bars, so how do it?
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上的分叉版本获取我的chart.js版本: Chart.js
I had the same problem and decided to write it. Please get my version of chart.js from my forked version on github: 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将移动值位置,以便您对其进行微调。
scaleValuePaddingX and scaleValuePaddingY will shift the value position so you can fine-tune it.
您还可以传递颜色数据集以分别为每个条形图着色:
You can also pass a dataset of colors to color each bar individually:
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],
}]
};
这篇关于如何使用chart.js在图形条上方显示值标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文