Display values in Pareto chart using Chart.js 2.0.2

浪子不回头ぞ 提交于 2019-12-03 21:59:02

This is the answer i developed (only in the options object):

var options = {
    animation: {
        onComplete: function() {
            var ctx = this.chart.ctx;
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";

            this.chart.config.data.datasets.forEach(function(dataset) {
                ctx.font = "20px Arial";
                switch (dataset.type) {
                    case "line":
                        ctx.fillStyle = "Black";
                        dataset.metaData.forEach(function(p) {
                            ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index], p._model.x, p._model.y - 20);
                        });
                        break;
                    case "bar":
                        ctx.fillStyle = "White";
                        dataset.metaData.forEach(function(p) {
                            ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index], p._model.x, p._model.y  + 20);
                        });
                        break;
                }
            });
        }
    }
...
};

And this is the result:

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!