Wie in ChartJs (neueste Version)

Question

Datenwerte oder Index Etiketten zeigen, wie in ChartJs (neueste Version), wie im folgenden Bilddatenwert oder Index Etiketten zeigen:

ich bin mit ChartJs zum Anzeigen von Diagrammen in meinem React-Projekt. Alles funktioniert gut, außer diesem.

Ich fand eine Antwort in stackoverflow (https://stackoverflow.com/a/31632707), aber es verwendet eine alte Version von chartjs und funktioniert nicht auf dem, den ich verwende.

Mein ChartJs Code:

var ctx = document.getElementById("myChart"); 

var BarChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     labels: ["Jan","Feb","March"], 
     datasets: [{ 
      label: "Chart Data", 
      data: [10,20,15], 
      backgroundColor: "red", 
      borderColor: "green", 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     legend: { 
      display: false 
     }, 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero: true 
       } 
      }], 
      xAxes: [{ 
       ticks: { 
        maxRotation: 180 
       } 
      }] 
     } 
    } 
}); 

Ich versuchte es mit der Funktion fügte hinzu: ctx.fillText(bar.value, bar.x, bar.y - 5);, aber seine zeigt .fillText is not a function

Answer 1

Endlich habe ich es zu arbeiten.

den folgenden Code in der onComplete() Funktion:

animation: { 
    onComplete: function() { 
     var ctx = this.chart.ctx; 
     ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily); 
     ctx.fillStyle = "black"; 
     ctx.textAlign = 'center'; 
     ctx.textBaseline = 'bottom'; 

     this.data.datasets.forEach(function (dataset) 
     { 
      for (var i = 0; i < dataset.data.length; i++) { 
       for(var key in dataset._meta) 
       { 
        var model = dataset._meta[key].data[i]._model; 
        ctx.fillText(dataset.data[i], model.x, model.y - 5); 
       } 
      } 
     }); 
    } 
} 

Answer 2

Verstanden nach einiger forsch zu arbeiten.

Sie müssen es im onComplete Ereignis der Animation nachher setzen. Die x, y-Werte der Stäbe werden im Modell der Kinder gespeichert (Punkt, Linie, eine Bar, was auch immer)

onComplete: function() { 
       var ctx = this.chart.ctx; 
       ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily); 
       ctx.textAlign = 'center'; 
       ctx.textBaseline = 'bottom'; 

       this.data.datasets.forEach(function (dataset) { 
        for (var i = 0; i < dataset.data.length; i++) { 
          console 
         var model = dataset._meta[0].dataset._children[i]._model; 
         ctx.fillText(dataset.data[i], model.x, model.y - 5); 
        } 
       });    
      } 

Gerade die Struktur ein wenig verändert.

Sie können es sehen, in dieser JSFiddle Arbeits