Chart.jsのドーナツチャートにラベルを追加すると、各チャートのすべての値が表示されます

Question

私はChart.jsを使用して自分のサイトに一連のチャートを描画しています。

drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, midLabel) { 
    var ctx = ctxElement; 
    var data = { 
     labels: ctxDataLabels, 
     datasets: ctxDataSets 
    }; 

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

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

    var chart = new Chart(ctx, { 
     type: ctxType, 
     data: data, 
     options: { 
      legend: { 
       display: false 
      }, 
      responsive: true 
     } 
    }); 
} 

drawChart（）メソッドの最後のパラメータには、グラフの中央に追加するラベルが含まれています。 Chart.pluginService.register部分は、ラベルを描画するコードです。問題は、drawChartメソッドを複数回（私の場合は3回）実行し、メソッド実行の各グラフのラベルを指定すると、3つすべてのラベルが各グラフの上に重ねて表示されることです。対応するグラフに各ラベルを表示する必要があります。他のすべてのパラメータは、ラベルを除いて正しく処理されます。

どのように達成できますか？

Answer 1

単純な回避策は、グラフを互いに区別するために、別のパラメータを関数に追加することです。

私はこのためにチャートのIDを使用することを選択したので、別のチャートには影響しません。

あなたは少しあなたの機能を編集する最初の必要性：

// !! 
// Don't forget to change the prototype 
// !! 
function drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, midLabel, id) { 
    var ctx = ctxElement; 
    var data = { 
     labels: ctxDataLabels, 
     datasets: ctxDataSets 
    }; 

    Chart.pluginService.register({ 
     afterDraw: function(chart) { 
      // Makes sure you work on the wanted chart 
      if (chart.id != id) return; 

      // From here, it is the same as what you had 

      var width = chart.chart.width, 
       height = chart.chart.height, 
       ctx = chart.chart.ctx; 

      // ... 
     } 
    }); 

    // ... 
} 

今から、あなたはあなたの関数を呼び出すときに、IDを忘れないでくださいは：

// ids need to be 0, 1, 2, 3 ... 
drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, "Canvas 1", 0); 
drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, "Canvas 2", 1); 
drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, "Canvas 3", 2); 

---

あなたはthis fiddle（3つのチャートを含む）に関する完全な実例を見ることができ、プレビューは以下の通りです：