首页 文章

在chart.js中为每个标签设置特定颜色

提问于
浏览 次
1

我正在尝试为使用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>

打字稿：

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

谢谢！

angular chart.js

1 回答

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

    或者在图表创建中添加 data

    只有当您使用新的Chart（...）graphData作为画布的参数时才会很棒

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

    jsFiddle

    回复于

相关问题