angular - 在 Chart.js 中设置每个标签的特定颜色

Question

我正在尝试为使用 chart.js 制作的图表设置颜色图书馆。

我需要为每个数据标签指定特定的颜色。但是当特定标签的数据为零时，颜色会变得困惑:(。

看起来该库删除了零数据标签和颜色不同的标签。

例如，当数据为:

• 颜色: 绿色、红色、黄色、
• 标签: 通过、失败、进行中
• 数据: 0、5、80

通过的标记数据将被跳过，因为其值为零，因此失败的标记数据将获得第一种颜色:绿色，依此类推。

如何强制颜色匹配？

---

当前代码:

html:

<canvas baseChart height="150px" width="150px" [data]="graphData" [labels]="graphLabels" [colors]="graphColors"
    [options]="graphOptions" [legend]="false" [chartType]="'doughnut'">
</canvas>

typescript :

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}
};

谢谢!

Answer 1

var graphData = {
    labels: ['Passed', 'Failed', 'In Progress'],
    datasets: [{
        label: 'Data',
        data: [0, 5, 80],
        backgroundColor: [
            "green",
            "red",
            "yellow"
        ],
    }]
};

或者在您的图表创建中添加数据

Only if you do the new Chart(...)

graphData as parameter to the canvas is great

var chr = new Chart(ctx, {
    data: graphData,
    type: 'pie',
    options: options,
});

jsFiddle