如何显示图表.js图例与不同的条形颜色

how to display chart.js legend with different bar color

本文关键字：颜色 显示图 js      更新时间：2023-09-26

我这里有一个代码: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。

既然您已经使用自己的函数修改了库代码以生成不同的颜色，那么您可以使用相同的函数来生成图例，如下所示(在脚本末尾)

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选项。

相关文章：