javascript - Chart.js - PieChart 为特定数据集元素定义背景颜色

Question

社区，

我正在尝试为每个特定的数据集元素创建一个 Chart.js - PieChart，它具有已定义的背景。

例如:数据集最多有 3 个元素:好、正常和坏。但它也可以只有两个甚至一个。

pieChartData () {
    let dataset = []
    let labels = []
    let bgColor = [
        'green',
        'yellow',
        'red'
    ]
    for (var key in this.accountProfile.categories) {
        if (this.accountProfile.categories.hasOwnProperty(key)) {
            labels.push(key)
            dataset.push(this.accountProfile.categories[key].volume)
        }
    }
    return { 
        labels: labels,
        datasets: [
            { 
                data: dataset,
                backgroundColor: bgColor
            }
        ]
    }
}

我想要:好如绿色，正常如黄色，坏得像红色

但如果我的数据集只有正常和不良，颜色就会混淆，正常是绿色而不是黄色，不良是黄色而不是红色等等。

任何帮助将不胜感激。谢谢，J

Answer 1

您可以定义数组，其中颜色是值，good、bad 和 normal 是键，请参见下一个:

let chartColors = [];
chartColors['good'] = 'green';
chartColors['bad'] = 'red';
chartColors['normal'] = 'yellow';

然后下一步将是添加新的数组变量，您将在其中以与标签相同的方式推送:

someColorVar.push(chartColors[key]); 

然后将bgcolor替换为someColorVar。