如何显示具有不同条形颜色的chart.js图例

Question

我这里有一个代码：http://jsfiddle.net/emo_noel10/5ztuvLwc/10/

var barData = {
    labels: ["Prk. Atis", "Prk. Avocado", "Prk. Bayabas", "Prk. Boongon", "Prk. Chico", "Prk. Durian", "Prk. Guyabano", "Prk. Kaimito", "Prk. Kasoy", "Prk. Lanzones", "Prk. Lomboy", "Prk. Mabolo", "Prk. Macopa", "Prk. Mangga", "Prk. Mangosteen", "Prk. Mansanas", "Prk. Marang", "Prk. Marang Joesil", "Prk. Melon", "Prk. Nangka", "Prk. Pomelo", "Prk. Rambutan", "Prk. Santol", "Prk. Sereguellas", "Prk. Sunkist", "Prk. Tambis", "Prk. Ubas", "Fishpond/Sea wall"],
    datasets: [{
        data: [20, 59, 80, 81, 56, 55, 40, 20, 59, 80, 81, 56, 55, 40, 20, 59, 80, 81, 56, 55, 40, 20, 59, 80, 81, 56, 55, 40]
    }]
};

var barDataOption = {
    responsive: true,
    scaleBeginAtZero: true,
    scaleShowGridLines: true,
    scaleShowHorizontalLines: true,
    scaleShowVerticalLines: true,
    animateRotate: true,
    animateScale: true,
    maintainAspectRatio: true,
    percentageInnerCutout: 50,
    legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
};

var puroksBarData = document.getElementById("totalPopulationByPurok").getContext("2d");
new Chart(puroksBarData).Bar(barData, barDataOption);

我很好奇，因为我得到了不同颜色的条形图，它可能会像 chart.js 饼图和甜甜圈图一样通过其指定颜色的条形显示图例？

任何帮助和建议都非常感谢，TIA。

Answer 1

看到您已经修改了库代码以使用自己的函数生成不同的颜色，您可以使用相同的函数来生成图例，就像这样（在脚本末尾）

var legendHTML = '';
barData.labels.forEach(function(label, i) {
    legendHTML += ('<li><span style="background: ' + getFillColor(i) + '"></span>' + label + '</li>');
})
document.getElementById("totalPopulationByPurokLegend").innerHTML = '<ul class="chartLegend">' + legendHTML + '</ul>';

使用 CSS

.chartLegend {
    list-style: none;
    margin: 0;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    font-color: #666;
}

.chartLegend span {
    display: inline-block;
    height: 10px;
    width: 10px;
    margin-right: 10px;
}

顺便说一下，您不需要legendTemplate 选项。