charts - 如何在Chart.js中将颜色系列设置为饼图

Question

我正在尝试使用Chart.js绘制饼图。我的值来自数据库，因此我不知道数据库中将有多少个值。在这里，我想为每个值设置一个唯一的颜色。以下是我的示例。

var pieData = [
    {
        value: 20,
        color:"#878BB6"
    },
    {
        value : 40,
        color : "#4ACAB4"
    },
    {
        value : 10,
        color : "#FF8153"
    },
    {
        value : 30,
        color : "#FFEA88"
    }
];

var pieOptions = {
    segmentShowStroke : false,
    animateScale : true
}

var countries= document.getElementById("countries").getContext("2d");
        new Chart(countries).Pie(pieData, pieOptions);

目前，在上面的示例中，我已经设置了硬编码值，但是在我的示例中，数据(Json)来自DB。

Answer 1

您可以循环使用pieData数组，并为颜色值设置随机值。

您可以使用“rgb(230,0,0)”之类的值设置该值，并随机生成红色，绿色，蓝色整数值。

像这样的东西:

r = Math.floor(Math.random() * 200);
g = Math.floor(Math.random() * 200);
b = Math.floor(Math.random() * 200);
color = 'rgb(' + r + ', ' + g + ', ' + b + ')';

请参阅 example jsfiddle here，其中包含随机值和随机颜色。 (运行几次以了解如何显示不同数据集。)

否则，您可以定义一组预定义的颜色并使用它。考虑到包含50多个项目的饼图不是很容易阅读。因此，默认列表50可能就可以了。