Javascript js数据结构，如何用数组和随机颜色动态填充？

我正在使用chart.js在我的站点上显示一个甜甜圈图表，我希望能够使用从页面其他地方提取的内容数组动态填充图表中的值。js在此数据结构中存储甜甜圈图表的值

var doughnutData = [
            {
                value: 10,
                color:"#F7464A"
            },
            {
                value : 10,
                color : "#46BFBD"
            },
            {
                value : 20,
                color : "#FDB45C"
            },
            {
                value : 50,
                color : "#949FB1"
            }

        ];

如何在Javascript中动态填充此数据结构的值

我已经知道我将如何使用它生成随机颜色（对于任何感兴趣的人）

---

你将会遇到的问题是，实际的随机性并不是真的被认为是随机的，所以你必须找到一种方法来检查每种颜色之间的颜色相似性，以确保它们不会看起来难以区分。我以前用过三种颜色（如下所示）。我的建议是创建一个你已经知道不同的颜色列表，然后从列表中随机选择

我试图将我的颜色保持在一定范围内：

function getRandomColor() {
    var color = '';
    while (!color.match(/(#[c-e].)([e-f][a-f])([9-c].)/)) {
        color = '#' + Math.floor(Math.random() * (Math.pow(16,6))).toString(16);
    }
    return color;
}

function getColorSimilarityIndex(c1, c2) {
    var index = 0;
    for (i = 1; i <= 6; i++) {
        if (i == 1 || i == 5) {
            if (c1.substring(i, i + 1) === c2.substring(i, i + 1)) {
                index++;
            }
        }
    }
    return index;
}

var color1 = getRandomColor();
var color2 = getRandomColor();
var color3 = getRandomColor();

while (getColorSimilarityIndex(color2, color1) > 0) {
    color2 = getRandomColor();
}
while (getColorSimilarityIndex(color3, color1) > 0 || getColorSimilarityIndex(color3, color2) > 0) {
    color3 = getRandomColor();
}

函数getRandomColor（）{ var color=''； 而（！color.match（/（#[c-e]）（[e-f][a-f]）（[9-c]）/）{ color='#'+Math.floor（Math.random（）*（Math.pow（16,6）））.toString（16）； } 返回颜色； } 函数getColorSimilarityIndex（c1，c2）{ var指数=0； 对于（i=1；i 0）{ color2=getRandomColor（）； } 而（getColorSimilarityIndex（color3，color1）>0 | | getColorSimilarityIndex（color3，color2）>0）{ color3=getRandomColor（）； }

---

您必须使用适当的元素构建阵列，如下所示：

var getcolor = function (num) {
    if (num == 0)
        return "#F38630";
    if (num == 1)
        return "#E0E4CC";
    if (num == 2)
        return "#69D2E7";
    if (num == 3)
        return "#003399";
    if (num == 4)
        return "#969696";
};

var piedata = []
for (i = 0; i <= self.countViolationsByManager().length - 1; i++) {
    piedata.push({
        value: self.countViolationsByManager()[i].Count(),
        label: self.countViolationsByManager()[i].MoneyManagerName(),
        color: getcolor(i)
    });
}

var pieoptions = {
}
var ctx = $("#myPieChart").get(0).getContext("2d");
var myNewChart = new Chart(ctx);
new Chart(ctx).Pie(piedata, pieoptions);

var getcolor=function（num）{
如果（num==0）
返回“#F38630”；
如果（num==1）
返回“#E0E4CC”；
如果（num==2）
返回“#69D2E7”；
如果（num==3）
返回“#003399”；
如果（num==4）
返回“#9696”；
};
var piedata=[]
对于（i=0；i Nice random hex one linerIt，你的
getColorSimilarityIndex
通过检查红色或蓝色的“十位”（第二个八位？）值是否相同来工作，它返回的值大于0。有什么原因吗？@胸腺嘧啶“我试图将我的颜色保持在一定范围内”--在我所做的工作中，我希望我的配色方案主要是绿色/黄色，因此我将绿色regexp限制在一个相当小的范围内，但允许红色成分有一个相对更大的范围，蓝色成分有一个更大的范围，这样它们就可能产生可识别的不同颜色。然后，相似性指数被确定我真正关心的只是强制执行红色和蓝色的成分足够不同。我决定10的位置应该至少相隔一个位数，这样才是真的。
var getcolor = function (num) {
    if (num == 0)
        return "#F38630";
    if (num == 1)
        return "#E0E4CC";
    if (num == 2)
        return "#69D2E7";
    if (num == 3)
        return "#003399";
    if (num == 4)
        return "#969696";
};

var piedata = []
for (i = 0; i <= self.countViolationsByManager().length - 1; i++) {
    piedata.push({
        value: self.countViolationsByManager()[i].Count(),
        label: self.countViolationsByManager()[i].MoneyManagerName(),
        color: getcolor(i)
    });
}

var pieoptions = {
}
var ctx = $("#myPieChart").get(0).getContext("2d");
var myNewChart = new Chart(ctx);
new Chart(ctx).Pie(piedata, pieoptions);