Question

我有以下实现，它的工作和功能。我正在检查以下javascript对象中的fname属性是否相同，然后为这些配对对象指定相同的颜色。

这是一个javascript对象示例：

{"value": 10,"series": 1,"category": "LG","fname": "","valueColor": ""},

然而，我想使用更多尊贵的颜色，而不是非常相似的颜色，例如在给定的fiddle中，颜色几乎都是绿色光谱。另外，我不想在value属性等于0

的情况下给出任何颜色值

这是核心实施

function colorSpectrum(N) {
    var colorMap = [], inc = 50, start = 1000;
    for (i = start; i < start+N*inc; i+=inc) {
        var num = ((4095 * i) >>> 0).toString(16);
        while (num.length < 3) {
            num = "0" + num;
        }
        colorMap.push("#" + num);
    }
    return colorMap;
}

function process(data){
    var map = {}, colorMap = colorSpectrum(data.length);
    data.forEach(function(item, index){
        if(!map.hasOwnProperty(item.fname)){
            map[item.fname] = colorMap[index];
        }
        data[index].valueColor = map[item.fname];
    }); 

    return data;
}

FIDDLE

Answer 1

尝试选择随机颜色

function colorSpectrum(N) {
    var colorMap = [];
    for (i = 0; i < N; i+=1) {
        var color = getRndColor()
        colorMap.push("#"+color);
    }
    return colorMap;
}

function getRndColor() {
    var n = Math.floor(Math.random()*255*255*255);
    var hex = Number(n).toString(16);
    while(hex.length < 6) {
        hex = "0"+hex;
    }
    return hex;
}

Answer 2

如果您想要从黑到白的全系列颜色，则需要更改此部分：

var colorMap = [], inc = 50, start = 1000;
for (i = start; i < start+N*inc; i+=inc) {

你看，循环从1000开始，颜色#3e8已经是绿色。比例应该从0到4095（对于3个字符的值，如#007，#abc等...），具有基于数据量的增量。

但是，我建议通过单独生成所有RGB组件而不是立即生成完整HEX值来获得至少一点控制权。

色谱优化

2 个答案: