我试图显示X轴下方堆积的条形图的总和。为此,我直接将其绘制在画布上,因为在chart.js文档中找不到其他方法。
通过使用以下函数并在动画完成时调用它,我已经成功实现了这一点。但是,我希望在图表加载完成后调用它,而不是在动画完成时调用它,因为它每次都会在悬停时重新加载函数。
animation: {
onComplete: function(){
// draw total count
var chartInstance = this.chart;
var ctx = chartInstance.ctx;
this.data.datasets[0].data.forEach(function(data, index) {
var total = data + this.data.datasets[1].data[index];
var meta = chartInstance.controller.getDatasetMeta(1);
var posX = meta.data[index]._model.x - 20;
var posY = chartInstance.height - 45;
ctx.fillStyle = "#554344";
ctx.fillText(total, posX, posY);
console.log(chartInstance);
}, this);
}
}
我尝试使用相同的代码,并在“插件”部分中创建了一个新插件。但是,我无法在插件部分访问getDatasetMeta。我在控制台中收到错误消息,即getDatasetMeta返回null。我在插件部分评论了代码。 https://jsfiddle.net/sohail710/d9v5p8jk/8/