Datamap - 値に応じて色を変更

Question

ここでデータマップの例を見つけて編集しようとしました。私は濃い青色から薄い青色までの値に応じて状態の色を変える必要があります。現時点で

、

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

ロジックをフィルキー選択に入れるオプションがないと思います。 Datamapsに与える前に、データを処理して塗りつぶしを割り当てることをお勧めします。 私はcodepenをデモンストレーションしました。 また、「塗りつぶし」データには、説明されている色と一致しない重複キーと16進値があります。

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 

});