如何使用Chart.js v1添加彩色圖例框到餅圖？

Question

我正在嘗試將圖例框添加到Chart.js v1的餅圖中。

這是我的HTML代碼：

<div id="TheLegendOfDeviceChart"></div> 
<canvas id="deviceChart" style="height:250px"></canvas> 

，這是我的Javascript代碼：

var pieChartCanvas = $("#deviceChart").get(0).getContext("2d"); 
var pieChart = new Chart(pieChartCanvas); 
var PieData = [ 
       { 
        value: 700, 
        color: "#f56954", 
        highlight: "#f56954", 
        label: "Chrome" 
       }, 
       { 
        value: 500, 
        color: "#00a65a", 
        highlight: "#00a65a", 
        label: "IE" 
       }, 
       // other values 
      ]; 
var pieOptions = { 
    // some options 
    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%><%}%></li><%}%></ul>", 
    }; 

var pie = pieChart.Pie(PieData, pieOptions); 
document.getElementById('TheLegendOfDeviceChart').innerHTML = pie.generateLegend(); 

這就是我得到：

A pie chart with a monochromatic legend

但我想有一個這樣的彩色圖例框： http://www.chartjs.org/docs/#doughnut-pie-chart-introduction

如何修改我的legendTemplate以獲取此？

Answer 1

您將不得不使用Chart.js 2.0來獲取您想要的圖例。你想使用1.0的原因是什麼？它不再支持，最後一個版本是2016年4月5日。

我強烈建議切換到2.0，然後您可以輕鬆利用新的圖例。

如果因爲任何原因你不能使用2.0並且必須堅持到1.0，那麼你需要糾正你的legendTemplate屬性。根據您提供您的小提琴是：

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%><%}%></li><%}%></ul>" 

這是困難的，因爲它是一個很長的字符串說，但在一個空<span>其中應包含，否則你的數據集的標籤這個HTML模板結果。請記住，即使空間跨度爲background，也不會渲染任何東西。下面是結果的圖例HTML，一旦它被渲染來展示我的意思。

每Chart.js v1 docs，正確legendTemplate字符串應該是。

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

的不同之處在於<span>包含數據集的標籤（並因此與彩色背景正確顯示）。但是，即使這個默認看起來很糟糕。

幸運的是，這只是標準的HTML和CSS，所以你可以設計你的圖例，但是你認爲合適。我建議您在HTML中創建一個您喜歡的圖例，然後將其轉換爲字符串並添加必要的chart.js模板表達式（例如<% for (var i=0; i<segments.length; i++){%,<%=segments[i].fillColor%>等）。

這是一個codepen example使用一個快速的傳奇模板，我想出了看起來非常接近Chart.js v2模板。爲了完整起見，我還提供了下面的關鍵部分。

CSS：

.indicator_box { 
    width: 55px; 
    height: 5px; 
    padding: 5px; 
    margin: 5px 10px 5px 10px; 
    padding-left: 5px; 
    display: block; 
    float: left; 
} 

模板字符串：

"<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li style=\"float: left; clear: both;\"><div class=\"indicator_box\" style=\"background-color:<%=segments[i].fillColor%>\"></div><span style=\"font-size: 20px;\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"