Chart.js中的条形图2.X - dataset.metadata undefined

Question

我是Chart.js 2的新手,所以任何帮助都将不胜感激.

我正在尝试显示图表中每个条形的值.正如使用Chart.js 2.0.2和我正在使用此解决方案的其他用户在Pareto图表中显示值中所建议的那样.但是,这部分抛出异常TypeError: dataset.metaData is undefined :

dataset.metaData.forEach(function(p) {
   ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index], p._model.x, p._model.y  + 20);
});

我只是想显示栏上的价值.有帮助吗？

Answer 1

通过以下更新onComplete,您的代码应与Chart.js v2.1一起使用

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

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

小提琴 - http://jsfiddle.net/0j4g7kxy/

我一直以为你只需要的吧,但我都保留的代码行的onComplete,所以它应该为线工作了.如果您不需要,只需case从onComplete代码中删除相关内容即可