我正在嘗試將圖例框添加到Chart.js v1的餅圖中。如何使用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以獲取此?
它不工作。這是我的jsfiddle:http:// jsfiddle。net/vrwjfg9z/3649/ – EstevaoLuis
@EstevaoLuis感謝您提供小提琴。我更新了我的答案,以指導您構建您所期望的模板。一定要通讀它,並檢查我的示例codepen。 – jordanwillis
非常感謝!它正在工作。爲了有一個水平的圖例列表,我去掉了li標籤中的'clear:both;'樣式 – EstevaoLuis