3

我正在使用 chart.js 在我的网站上显示一个圆环图，我希望能够使用从页面上其他位置提取的内容数组动态填充图表中的值。Chart.js 在这个数据结构中存储它的圆环图值

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

        ];

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

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

'#'+Math.floor(Math.random()*16777215).toString(16)
4

2 回答 2

2

您将遇到的问题是实际随机性并没有真正被认为是随机的，因此您必须想办法检查每种颜色之间的颜色相似性，以确保它们不会出现难以区分。我以前用三种颜色做过这个（下图）。相反，我建议创建一个您已经知道不同的颜色列表，并从该列表中随机选择。

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

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();
}
于 2013-03-20T01:44:46.320 回答
1

您必须使用其中的适当元素构建数组，如下所示：

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);
于 2013-05-02T18:56:01.340 回答