返回百分比chart.js（v2 +）圖例

Question

Chart.js 2+不會爲餅圖中的圖例項目返回百分比。

我在我的HTML名爲#legend的單獨項目中存儲圖例。然後我將其設置爲innerHTML至​​。它同時返回的顏色和名字，但我希望能夠覆蓋這個HTML模板也返回百分比，所以從恰似輸出變爲：

• 一個
• 乙
• Ç

到：

• A（13％）
• B（50％）
• Ç

我用於與legendTemplate參數來做到的，但它似乎不工作了（37％）：

legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%> (<%=segments[i].value%>%)<%}%></li><%}%></ul>" 

Answer 1

Chart.js v2與早期版本有完全不同的API。在升級之前，您應該仔細閱讀新的documentation（然後不得不想知道什麼是錯誤的）。

根本的改變（與你的問題）是：

• legendTemplate和segments不再可用。您應該改用legendCallback（在options中）來覆蓋默認的圖例實現。以下是關於此回調的文檔說明：

用於生成圖例的函數。接收圖表對象以從中生成圖例。默認實現返回一個HTML字符串。

• 你segments使用的數據是你的legendCallback功能這裏在chart參數（即實際圖表對象）可得：chart.data.datasets[0].data。
• 現在我們知道從哪裏獲取所需的數據，我們可以循環訪問chart.data.datasets[0].data以收集這些值並將它們附加到圖例HTML字符串。
• 然後我們可以簡單地撥打​​，這將調用我們的legendCallback。

完整的示例：

var myPieChart = new Chart(ctx, { 
    type: 'pie', 
    data: d, 
    options: { 
     responsive: true, 
     maintainAspectRatio: false, 
     tooltips: { 
      callbacks: { 
       label: function (tooltipItem, data) { 
        return data.labels[tooltipItem.index] + ' (' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '%)'; 
       } 
      } 
     }, 
     legendCallback: function (chart) { 
      var text = []; 
      text.push('<ul class="' + chart.id + '-legend">'); 

      var data = chart.data; 
      var datasets = data.datasets; 
      var labels = data.labels; 

      if (datasets.length) { 
       for (var i = 0; i < datasets[0].data.length; ++i) { 
        text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>'); 
        if (labels[i]) { 
         text.push(labels[i] + ' (' + datasets[0].data[i] + '%)'); 
        } 
        text.push('</li>'); 
       } 
      } 
      text.push('</ul>'); 
      return text.join(''); 
     }, 
     legend: { 
      // since you're providing your own legend 
      display: false, 
     },     
    } 
}); 

var legend = myPieChart.generateLegend(); 
document.getElementById("legend").innerHTML = legend; 

爲了完整起見，我還添加了對工具提示標籤（這類似於傳說，用於覆蓋默認的實現提供了自己的回調）相同TEXT (PERCENTAGE%)模板。

我還建議瀏覽實際的Chart.js源代碼，特別是看看legendCallBack,generateLegend()等，以便更好地理解事物如何工作。