Question

我是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);
});

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

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/

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

中删除相关的onComplete即可

Answer 2

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

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

Answer 3

适合我！ chart.js 2.5.0

除了potatopeelings＆slashpm答案。

要处理 horizontalBar ，您可以添加此案例（更改填充＆＃34;偏移Y＆＃34;到＆＃34;偏移X＆＃34;）

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;
    }
  });
}

Answer 4

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

        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;
            }
        });
    }

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

4 个答案: