Chart.jsを使用してドーナツチャートの中心にテキストを追加するには？

Question

2つの値を持つドーナツグラフを作成したいと思います。グラフをクリックすると中央に値が印刷されます。私はstackoverflowの解決策を私の要求と同じように見つけました。 githubの最新のChart.jsライブラリを使用したいと考えています。この機能は最新のChart.jsで利用できますか？

Answer 1

私がそれを行うには素敵な方法は、プラグインを使用していると思うChart.jsのv2.xの

にこのような何かをすることは確かに可能です。 https://jsfiddle.net/cmyker/ooxdL2vj/

および対応するプラグインの定義：

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

実際には、質問への Cmyker awnserは、あなたも彼のフィドルを参照してくださいCharts.jsのバージョン2.xに、これはどのように動作するか

を表示するために彼の記事を更新するためにリンク

Answer 2

デビッドの答えはまあまあです。ありがとう。 凡例の高さを考慮していないため、テキストが実際に集中化されていないと付け加えたいと思います。

var legendHeight = chart.legend.height; 

textY = height/2 + legendHeight/2; 

これらを追加すると、それが修正されます。

Answer 3

ます。また、コンフィギュレーションにパラメータを追加し、テキストとしてこれを使用することができます注意してください（

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

そして、このようになりますジャバスクリプト：ドーナツが中心にテキストを配置し、タイトルが、ノー伝説を持っています何とか実験していた）：

<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>