Datamap - 根據值更改顏色

Question

我在這裏遇到了一個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 
       }, 
      .... 
} 

但有視userVisits產生深淺不一的藍色？

Answer 1

我不認爲有一個選項可以將邏輯放在fillkey選項中。我建議在將數據提交給Datamaps之前處理數據以分配一個fillkey。 我做了一個codepen來演示。 此外，「填充」數據具有與所述顏色不匹配的重複鍵和十六進制值。

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 

});