Chart.js2.X中的条形值-数据集元数据未定义

Bar values in Chart.js 2.X - dataset.metadata undefined

本文关键字：数据集 元数据 未定义 js2 Chart      更新时间：2023-09-26

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

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

有了下面更新的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;
                }
            });
        }
    },
    ...

Fiddle-http://jsfiddle.net/0j4g7kxy/

我假设您只需要栏，但我在onComplete中保留了行的代码，所以它也应该适用于行。如果不需要，只需从onComplete代码中删除相关的case即可

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

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

适合我图表.js 2.5.0

除了potatopeelings和slashpm的答案。

要处理水平条，您可以添加这种情况（将填充"offsetY"更改为"offsetX"）

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

我对它进行了一点调整，使其适用于水平条形图，以显示值的总和，而不是堆叠值。也许有人可以稍微美化一下代码，但它是这样工作的：

        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;
            }
        });
    }
相关文章：