色譜優化

我有以下實現，它的工作原理和功能。我正在檢查以下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

來源

2015-06-09 hotspring

不知道我明白什麼是問題。你能解釋得更好嗎？也許只是表明你想達到什麼目的。 – Shomz

@Shomz，我想爲每個javascript對象分配更多尊貴的顏色。我目前的實施確實將顏色從白色擴展到黑色。 – hotspring

考慮使用HSL更容易得到一個很好的調色板http://www.w3.org/wiki/CSS/Properties/color/HSL – Plato

儘量挑選顏色隨機

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; 
}

來源

2015-06-09 15:57:59

如果您需要從黑色到白色的全系列顏色，則需要更改此部分：

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

你看，循環從1000，這是顏色#3e8，已經開始綠化。比例應該從0到4095（對於3個字符的值，如#007,#abc等），並且具有基於數據量的增量。

但是，我建議通過讓所有RGB組件分別生成而不是立即生成完整的HEX值來獲得至少一點控件。

來源

2015-06-09 16:01:59 Shomz

回答

相關問題