我正在尝试为使用chart.js库制作的图表设置颜色。
我需要为每个数据标签使用特定的颜色。但是当特定标签的数据为零时，颜色会混淆:(。
好像该库删除了零数据标签和标签颜色不同。
例如，当数据为：
green，red，yellow，passed，failed，in progress0，5，80传递的标记数据将被跳过，因为其值为零，因此失败的标记数据将获得第一种颜色：green，依此类推。
如何强制颜色匹配？
当前代码：
的HTML：
<canvas baseChart height="150px" width="150px" [data]="graphData" [labels]="graphLabels" [colors]="graphColors"
[options]="graphOptions" [legend]="false" [chartType]="'doughnut'">
</canvas>
打字稿：
this.graphData = this.data.map(r => r.cnt);
this.graphLabels = this.data.map(r => r.city);
this.graphOptions = {
layout: {padding: 20},
cutoutPrecentage: 90,
legend: {display: false}
};
谢谢！
var graphData = {
labels: ['Passed', 'Failed', 'In Progress'],
datasets: [{
label: 'Data',
data: [0, 5, 80],
backgroundColor: [
"green",
"red",
"yellow"
],
}]
};
或者在您的图表创建中添加 data
只有当你做
new Chart(...)
graphData作为参数canvas很好
var chr = new Chart(ctx, {
data: graphData,
type: 'pie',
options: options,
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句