Wie fügt man Text in der Mitte des Donut-Diagramms mit Chart.js hinzu?

Question

Ich möchte ein Donut-Diagramm mit zwei Werten erstellen. Durch Klicken auf die Diagramme sollte der Wert in der Mitte gedruckt werden. Ich fand eine Lösung in stackoverflow ähnlich meiner Anforderung. Ich möchte die neueste Chart.js-Bibliothek von github verwenden. Ist diese Funktion in den neuesten Chart.js verfügbar?

Answer 1

Es ist sicherlich möglich, so etwas wie dies in Chart.js v2.x

Ich denke, die schönste Art zu tun, es zu tun, indem ein Plugin ist. In der Tat, Cmyker awnser auf die Frage verknüpft Sie sogar seine Beiträge aktualisiert zu zeigen, wie diese in Charts.js v2.x funktionieren würde

Siehe seine Geige: https://jsfiddle.net/cmyker/ooxdL2vj/

und das entsprechende Plug-Definition:

Chart.pluginService.register({ 
    beforeDraw: function(chart) { 
    var width = chart.chart.width, 
     height = chart.chart.height, 
     ctx = chart.chart.ctx; 

    ctx.restore(); 
    var fontSize = (height/114).toFixed(2); 
    ctx.font = fontSize + "em sans-serif"; 
    ctx.textBaseline = "middle"; 

    var text = "75%", 
     textX = Math.round((width - ctx.measureText(text).width)/2), 
     textY = height/2; 

    ctx.fillText(text, textX, textY); 
    ctx.save(); 
    } 
}); 

Answer 2

Die Antwort von David funktioniert verdammt gut. Vielen Dank. Ich möchte hinzufügen, dass der Text nicht wirklich zentralisiert ist, da es die Legendenhöhe nicht berücksichtigt hat.

var legendHeight = chart.legend.height; 

textY = height/2 + legendHeight/2; 

Hinzufügen dieser wird das beheben.

Answer 3

Sie können auch einen Parameter zur Konfiguration hinzuzufügen, und verwenden Sie diese als Text:

"options": { 
     title: { 
      display: true, 
      position: "bottom", 
      text: 'Upcoming Meetings' 
     }, 
     legend: { 
      display: false 
     }, 
     centertext: "123" 
    } 

Und das Javascript würde so aussehen (Bitte beachten Sie: Donuts haben einen Titel, aber keine Legende, die Positionierung des zentrierten Text experimentierte irgendwie):

<script> 
     Chart.pluginService.register({ 
      beforeDraw: function (chart) { 
       if (chart.options.centertext) { 
        var width = chart.chart.width, 
          height = chart.chart.height, 
          ctx = chart.chart.ctx; 

        ctx.restore(); 
        var fontSize = (height/80).toFixed(2); // was: 114 
        ctx.font = fontSize + "em sans-serif"; 
        ctx.textBaseline = "middle"; 

        var text = chart.options.centertext, // "75%", 
          textX = Math.round((width - ctx.measureText(text).width)/2), 
          textY = height/2 - (chart.titleBlock.height - 15); 

        ctx.fillText(text, textX, textY); 
        ctx.save(); 
       } 
      } 
     }); 
    </script>