Chart.jsのバー値2.X - dataset.metadataが未定義

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

私はバーの上にわずかに値を表示したいです。どんな助け？以下onComplete更新して

Answer 1

、あなたのコードは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/

私はあなただけバーを必要と仮定してきました、しかし私はのコードをのに残しているので、それも行のために働くはずです。あなたがいずれかの必要がない場合は、単にChart.jsのV2.5を使用してonCompleteコードpotatopeelingsの答えに加えて

Answer 2

、 から関連caseを削除し、私は次のように調整しなければならなかった：switch (chart.getDatasetMeta(i).type)へ

switch (dataset.type)

Answer 3

私のために働く！ chart.js 2.5.0

potatopeelingsとslashpmの回答に加えて、あなたはこのケースを追加することができますhorizo​​ntalBarを処理するために

（へ "offsetX" パディング "offsetY" に変更）

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