向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方法調用多次（在我的情況三次），並提供在該方法中執行的每個圖表的標記，所有的三個標籤顯示在每個圖上彼此的頂部。我需要相應的圖表中顯示每個標籤。所有其他參數都正確處理，除了標籤。

我該如何做到這一點？

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個圖表）上看到完整的示例，並且這裏是預覽：