Установка определенного цвета для метки в 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"
        ],
    }]
};

Или при создании диаграммы добавьте data

Только если вы сделаете new Chart(...)

graphData в качестве параметра для canvasотлично

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

jsFiddle