javascript - 配对 javascript 对象并分配相同的颜色

Question

是否有可能找到一种更好的/模块化的方式来为配对分配相同的颜色，而不是像我目前实现的那样对它们进行硬编码？

如果对象 fname 匹配，则分配相同的颜色。

以下是 javascript 对象的子集。

data[0] = [{
    "value": 29,
    "series": 1,
    "category": "Men",
    "fname": "NY",
     "valueColor": "red"
},


data[1] = [{
    "value": 19,
    "series": 4,
    "category": "Women",
    "fname": "NY",
     "valueColor": "red"
},

data[2] = [{
    "value": 9,
    "series": 3,
    "category": "LG",
    "fname": "NY",
    "valueColor": "red"
},

这是 FIDDLE 中的完整实现

首先我假设，所有的对象都是不同的并分配不同的颜色，然后我将检查是否有配对的对象，如果是，则分配相同的颜色。

因此，最好根据数据集中存在的多个对象生成 colorSpectrum，而不是分配常见的颜色，例如红色、绿色、黄色等。因为您无法提前猜测你会得到多少不同的对象。我可能会得到大约 10 个对象，也许大约 100 个对象。因此，我正在寻找一种模块化的方式来处理这个困难。

这是 COLOR SPECTRUM FIDDLE 中的 colorSpectrum 方法实现

Answer 1

你可以这样做。

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

data = process(data);

这是一个演示 http://jsfiddle.net/dhirajbodicherla/fm79hsms/7/