Text in der Bar - chart.js

Question

ich Text in die Bar in Grafik schreiben müssen chart.js

var ctx = document.getElementById("myChart"); 
     var myChart = new Chart(ctx, { 
      type: 'bar', 
      data:data, 
      options: { 

       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero:true 
         } 
        }] 
       } 
      }, 
      responsive : true, 
      showTooltips : false, 
      showInlineValues : true, 
      centeredInllineValues : true, 
      tooltipCaretSize : 0, 
      tooltipTemplate : "<%= value %>" 
     }); 

mit den obigen Code Sie arbeiten nicht ...

i so etwas wie dieses brauchen :

example

Answer 1

haben Sie eine var ctx = document.getElementById("myChart"); definiert in Ihrem Code haben.

UPDATE

diesen Code, um Ihre Optionen Objekt hinzufügen:

animation: { 
    onComplete: function() { 
    var chartInstance = this.chart; 
    var ctx = chartInstance.ctx; 
    console.log(chartInstance); 
    var height = chartInstance.controller.boxes[0].bottom; 
    ctx.textAlign = "center"; 
    Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) { 
     var meta = chartInstance.controller.getDatasetMeta(i); 
     Chart.helpers.each(meta.data.forEach(function (bar, index) { 
     ctx.fillText(dataset.data[index], bar._model.x, height - ((height - bar._model.y)/2)); 
     }),this) 
    }),this); 
    } 
} 

https://jsfiddle.net/h4p8f5xL/

UPDATE 2

mit einem Behälter Surround Ihre Leinwand mit der gewünschten Breite und Höhe

<div style="width: 100%; height: 500px"> 
    <canvas id="myChart" width="400" height="400"></canvas> 
</div> 

und fügen Sie den folgenden in Ihre Optionen

// Boolean - whether or not the chart should be responsive and resize when the browser does. 
responsive: true, 
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container 
maintainAspectRatio: false, 

Answer 2

Objekt Wenn Sie für jedes Element zentriert Text machen möchten, gibt es einen einfacheren Weg:

Chart.helpers.each(meta.data.forEach(function (bar, index) { 
    var centerPoint = bar.getCenterPoint(); 
    ctx.fillText(dataset.data[index], centerPoint.x, centerPoint.y)); 
}),this) 

Es scheint, dass ‚getCenterPoint‘ ist nicht verfügbar in Version 2.1.3 (die Sie in Ihrem Beispiel verwenden). Ich versuchte es mit 2.5.0 und es funktioniert