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

时间:2016-05-04 12:35:45

标签: javascript charts chart.js

我是Chart.js 2的新手,所以任何帮助都会受到赞赏。

我试图显示图表中每个条形的值。正如Display values in Pareto chart using Chart.js 2.0.2和其他用户所建议的,我使用此解决方案。但是,此部分抛出异常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);
});

我只想在条形图上显示价值。有什么帮助吗?

4 个答案:

答案 0 :(得分:6)

使用以下更新的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/

我假设您只需要 bar ,但我在onComplete中保留了的代码,因此它也适用于行。如果您不需要,只需从case代码

中删除相关的onComplete即可

答案 1 :(得分:1)

除了potatopeelings的回答, 使用Chart.js v2.5,我不得不调整以下内容:

switch (dataset.type)switch ( chart.getDatasetMeta(i).type )

答案 2 :(得分:1)

适合我! chart.js 2.5.0

除了potatopeelings&slashpm答案。

要处理 horizo​​ntalBar ,您可以添加此案例(更改填充"偏移Y"到"偏移X")

case "horizontalBar":
    ctx.fillStyle = "Black";
    chart.getDatasetMeta(i).data.forEach(function (p, j) {
    ctx.fillText(datasets[i].data[j], p._model.x + 20, p._model.y);
  });
break;

这是完整的功能

function chartValuesShow() { // show max values of the chart
  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.fontSize = "10px";
    switch (chart.getDatasetMeta(i).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 = "Black";
        chart.getDatasetMeta(i).data.forEach(function (p, j) {
          ctx.fillText(datasets[i].data[j], p._model.x, p._model.y + 20);
        });
        break;
      case "horizontalBar":
        ctx.fillStyle = "Black";
        chart.getDatasetMeta(i).data.forEach(function (p, j) {
          ctx.fillText(datasets[i].data[j], p._model.x + 20, p._model.y);
        });
        break;
    }
  });
}

答案 3 :(得分:0)

我对水平条进行了一点调整,以显示值的总和而不是堆积值。也许有人可以稍微美化代码,但它的工作原理如下:

        onComplete: function() {
        var ctx = this.chart.ctx;
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        var chart = this;
        var datasets = this.config.data.datasets;
        var sum=new Array();
        datasets.forEach(function (dataset, i) {
            ctx.font = "10px Arial";

            switch ( chart.getDatasetMeta(i).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;
                case "horizontalBar":
                    ctx.fillStyle = "Black";
                    chart.getDatasetMeta(i).data.forEach(function (p, j) {
                    if (sum[j]== null) { sum[j] = 0; }
                    sum[j]=sum[j]+parseFloat(datasets[i].data[j]);
                    if (i==datasets.length-1) {ctx.fillText(sum[j], p._model.x+10, p._model.y);}

                    });

                    break;
            }
        });
    }