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/

配对javascript对象并指定相同的颜色

1 个答案: