Javascript 数据映射-根据值更改颜色

我在这里遇到了一个datamap示例，并试图对其进行编辑。我需要根据值更改状态颜色，范围从深蓝色到浅蓝色

目前,

fills: {
            'lightBlue': '#cc4731',
            'justBlue': '#306596',
            'deepBlue': '#667faf',
            'mediumBlue': '#a9c0de',
            'deepBlue': '#ca5e5b',              
            'defaultFill': '#eddc4e'
        }

而且数据已经

data: {
            AZ: {
                    fillKey: 'lightBlue',
                    userVisits: 5
                },
            CO: {
                    fillKey: 'justBlue',
                    userVisits: 5
                },
            DE: {
                    fillKey: 'deepBlue',
                    userVisits: 32
                },
            ....
}

---

但是有没有根据用户访问量生成蓝色的阴影

我认为没有一个选项可以将逻辑放入fillkey选择中。我建议先处理数据以分配一个fillkey，然后再将其分配给Datamaps。 我做了一个演示。 此外，“填充”数据具有与所述颜色不匹配的重复键和十六进制值

var stateData = {
        AZ: {
                userVisits: 5
            },
        CO: {
                userVisits: 15
            },
        DE: {
                userVisits: 32
            }
    }

function addFillKey(mapData){
  for (var mapDatum in mapData){
        var userVisits = mapData[mapDatum].userVisits;
        if(userVisits < 10){
            mapData[mapDatum].fillKey = "lightBlue"
        }else if(userVisits < 20){
            mapData[mapDatum].fillKey = "justBlue"
        }else{
            mapData[mapDatum].fillKey = "mediumBlue"
        }
    }
}

addFillKey(stateData);

var map = new Datamap({
  element: document.getElementById('container'),
  scope: 'usa',
  fills: {
    'lightBlue': '#cc4731',
    'justBlue': '#306596',
    'deepBlue': '#667faf',
    'mediumBlue': '#a9c0de',
    'deepBlue': '#ca5e5b',              
    'defaultFill': '#eddc4e'
  },
  data: stateData

});

var stateData={
阿兹：{
用户访问次数：5
},
公司：{
用户访问：15
},
DE:{
用户访问次数：32
}
}
函数addFillKey（mapData）{
用于（mapData中的变量mapDatum）{
var uservisions=mapData[mapdatam].uservisions；
如果（用户访问次数<10）{
mapData[mapDatum].fillKey=“lightBlue”
}否则如果（用户访问次数<20）{
mapData[mapDatum].fillKey=“justBlue”
}否则{
mapData[mapDatum].fillKey=“mediumBlue”
}
}
}
addFillKey（stateData）；
var-map=新数据映射({
元素：document.getElementById（'container'），
经营范围：美国，
填充：{
“浅蓝色”：“cc4731”，
“justBlue”：“306596”，
“深蓝”：“667faf”，
“mediumBlue”：“a9c0de”，
“深蓝色”：“ca5e5b”，
“defaultFill”：“eddc4e”
},
数据：stateData
});