如何在 Chart.js 中添加索引标签(在条形图顶部)
How to add index labels(on top of bar charts) in Chart.js
我正在使用 angular-chart.js(使用 Chart.js)在我的 angular 应用程序中创建图表。我想在条形图中的条形顶部添加值。
如果扩展 Chart.js 中的默认图表是唯一的方法,您能否提供参考代码?
您可以使用此处的答案 并稍微修改回调函数以显示索引值而不是值
...
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar, i) {
ctx.fillText(i + 1, bar.x, bar.y - 5);
});
})
...
回调可以通过angular-图表选项参数传入。您不会扩展图表类型,因此您不需要使用 angular-chart.
注册新指令
Fiddle - http://jsfiddle.net/zkqu7tsp/
这是 angular-chart 选项的 onAnimationComplete 回调
onAnimationComplete: function () {
var chart = this.chart;
var ctx = this.chart.ctx;
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar, i) {
console.log(bar)
ctx.fillText(bar.value, bar.x, bar.y - 5);
});
})
希望对你有帮助..
我正在使用 angular-chart.js(使用 Chart.js)在我的 angular 应用程序中创建图表。我想在条形图中的条形顶部添加值。 如果扩展 Chart.js 中的默认图表是唯一的方法,您能否提供参考代码?
您可以使用此处的答案
...
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar, i) {
ctx.fillText(i + 1, bar.x, bar.y - 5);
});
})
...
回调可以通过angular-图表选项参数传入。您不会扩展图表类型,因此您不需要使用 angular-chart.
注册新指令Fiddle - http://jsfiddle.net/zkqu7tsp/
这是 angular-chart 选项的 onAnimationComplete 回调
onAnimationComplete: function () {
var chart = this.chart;
var ctx = this.chart.ctx;
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar, i) {
console.log(bar)
ctx.fillText(bar.value, bar.x, bar.y - 5);
});
})
希望对你有帮助..