2つの異なるDoughutsチャートの中にテキストを追加する

Question

私は2つのチャートを持っています。それぞれがチャートを表示している魔女月を示すタイトルで1ヶ月のデータを表示します。しかし、両方のチャートで、両方の月のタイトルが表示されます。 誰かが希望のテキストを右側のチャートの中央に表示することができたのだろうかと思います。 Demo

<canvas id="myChart"></canvas> 
<canvas id="myChart1"></canvas> 

<script type="javascript"> 
    var data = { 
     labels: [ 
      "White", 
      "Blue", 
      "Yellow" 
     ], 
     datasets: [{ 
      data: [300, 50, 100], 
      backgroundColor: ["#FFF", "#36A2EB", "#FFCE56"], 
      hoverBackgroundColor: ["#FFF", "#36A2EB", "#FFCE56"] 
     }] 
    }; 

    var DeliveryChart = new Chart(document.getElementById('myChart'), { 
     type: 'doughnut', 
     elementById: ('myChart'), 
     data: data, 
     options: {responsive: true, legend: {display: false}} 
    }); 

    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 = "Oktober", 
       textX = Math.round((width - ctx.measureText(text).width)/2), 
       textY = height/2; 
      ctx.fillText(text, textX, textY); 
      ctx.save(); 
     } 
    }); 

    var data = { 
     labels: ["Red", "Blue", "Yellow"], 
     datasets: [{ 
      data: [300, 50, 100], 
      backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"], 
      hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"] 
     }] 
    }; 

    var promisedDeliveryChart = new Chart(document.getElementById('myChart1'), { 
     type: 'doughnut', 
     elementById: ['myChart1'], 
     data: data, 
     options: {responsive: true, legend: {display: false}} 
    }); 

    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 = "November", 
       textX = Math.round((width - ctx.measureText(text).width)/2), 
       textY = height/2; 
      ctx.fillText(text, textX, textY); 
      ctx.save(); 
     } 
    }); 
</script> 

Answer 1

私はあなたが2つのbeforeDraw関数を登録しているからだと思います。これらは特定のチャートに束縛されていません。テキストがチャートのデータを参照するようにするには、チャートオブジェクトのデータを使用するようにテキストを更新する必要があります。

これを行うには、渡したオプションにタイトルを追加しました（これは、各ドーナツにタイトルを表示するというデメリットがありますが、おそらくそれを回避することができます）。次に、onDraw関数はそのタイトルテキストを使用してドーナツの中心に表示します。

var promisedDeliveryChart = new Chart(document.getElementById('myChart1'), { 
    type: 'doughnut', 
    elementById:['myChart1'], 
    data: data2, 
    options: { 
    responsive: true, 
    legend: { 
     display: false 
    }, 
    title: { 
      display: true, 
      text: 'November' 
     } 
    } 
}); 




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"; 
    console.log (chart.options.title.text); 
    var text = chart.options.title.text; 
     textX = Math.round((width - ctx.measureText(text).width)/2), 
     textY = height/2; 

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

fiddleを更新しました。