Chart.js - Etiketten innerhalb von horizontalen Balken schreiben?

Question

In Chart.js gibt es eine Möglichkeit, die Etiketten innerhalb der horizontalen Balken in einem "horizontalBar" Diagramm zu schreiben? Wie in so etwas wie:

ist etwas ähnlich wie diese möglich in Chart.js?

Danke!

Answer 1

Es gibt jetzt auf Option "Spiegel" zu machen Das Etikett erscheint in der Leiste.

Beispiel von "Optionen" config für eine horizontalBar Diagramm:

options: { 
    scales: { 
     yAxes: [{ticks: {mirror: true}}] 
    } 
} 

Doc: http://www.chartjs.org/docs/latest/axes/cartesian/#common-configuration

Answer 2

Es scheint, als ob es keine direkte Option dafür jetzt gibt. Eine mögliche Implementierung ist das Iterieren über Balken/Spalten mithilfe des onAnimationComplete-Hooks. Sie können diese Frage für detaillierte Erklärungen anzeigen how to display data values on Chart.js

Ich möchte Sie daran erinnern, dass dies einen Nachteil hat. Da es onAnimationComplete verwendet, verschwinden die Werte für eine Sekunde, sobald eine Animation im Diagramm auftritt, und erscheinen erneut.

Answer 3

Mit Bezug auf die original solution to displaying data value unter Verwendung HTML5 Canvas fillText() Methode in der animation ‚s onComplete, unter dem Code erhalten Sie, was Sie brauchen:

Der Schlüssel, um benutzerdefinierte-Anzeige einen beliebigen Plan bezogenen Daten der Chart inspiziert Datensatz wie in this.data.datasets unten. Ich habe dies untersucht, indem ich untersucht habe, wo sich die verschiedenen Werte in diesem Dataset befinden und wie sie für die fillText-Methode platziert werden.

Inspizieren der Chart-Datensatz: Image

Script (Chart.js 2.0 & up):

var barOptions = { 
     events: false, 
     showTooltips: false, 
     legend: { 
     display: false 
     }, 
     scales:{ 
     yAxes: [{ 
      display: false 
     }] 
     }, 
     animation: { 
     onComplete: function() { 
      var ctx = this.chart.ctx; 
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily); 
      ctx.textAlign = 'left'; 
      ctx.textBaseline = 'bottom'; 

      this.data.datasets.forEach(function (dataset) { 
      for (var i = 0; i < dataset.data.length; i++) { 
       var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model, 
        left = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left; 
       ctx.fillStyle = '#444'; // label color 
       var label = model.label; 
       ctx.fillText(label, left + 15, model.y + 8); 
      } 
      });    
     } 
     } 
    }; 

jsFiddle: http://jsfiddle.net/jfvy12h9/

Answer 4

Sie diesen Effekt in chartjs erreichen 2.0 + durch die Etiketten 90 Grad drehen und negative padding Anwendung , so dass das Etikett innerhalb der "Bar" nach oben bewegt wird. Etwas wie dieses:

new Chart(document.getElementById(id), { 
    type: 'bar', 
    data: data, 
    options: { 
    scales: { 
     xAxes: [ 
     { 
      ticks: { 
      autoSkip: false, 
      maxRotation: 90, 
      minRotation: 90, 
      padding: -110 
      } 
     } 
     ] 
    } 
    } 
}); 

Sehen Sie die tick configuration documentation für mehr Information.