我在使用chart.js时遇到了自定义图例的问题。我的环形图表如下所示:
你可以看到,侧边的图例没有显示彩色方块图标。理论上应该像这样:
这是我图表的HTML代码:
<canvas id="merchantChart" height="660" width="330"></canvas>
<div id="merchantLegend" class="chart-legend"></div>
这是我设置每个数据块颜色并覆盖chart.js默认图例的部分代码:
var opt = {
type: "doughnut",
data: {
labels: labelData,
datasets: [{
data: priceData,
backgroundColor: "rgba(220,220,220,0)",
borderColor: colorArr,
borderWidth: 1.5,
hoverBackgroundColor: colorArr
}]
},
options: options
};
if (merchantChart) merchantChart.destroy();
merchantChart = new Chart(ctx, opt);
merchantChart.update();
merchantLegend.innerHTML = merchantChart.generateLegend();
您可以看到,因为我将每个饼图片段的backgroundColor设置为透明,是否有办法根据每个饼图片段的borderColor生成图例(generateLegend())?
谢谢!