使用甜甜圈图并使用回调(属性可编写脚本)定义backgroundColor会以期望的颜色呈现圆弧,但所有图例框均为深灰色。
将backgroundColor切换为数组会导致问题消失,但是不允许基于标签设置颜色。
var chart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: function(context) {
var index=context.dataIndex;
switch(labels[index]) {
case "Work in progress":
return 'rgba(0,123,255,0.5)';
break;
case "Submitted":
return 'rgba(255,193,7,0.5)';
break;
case "Approved":
return 'rgba(23,162,184,0.5)';
break;
case "Paid":
return 'rgba(40,167,69,0.5)';
break;
case "Rejected":
return 'rgba(220,53,69,0.5)';
break;
default:
return 'rgba(0,0,0,0.1)';
}
},
}]
},
});
我希望图例使用与实际弧线相同的颜色。