はなぜ機能していない私のammap領域の色である

Question

1.picture

2.question

コンソールデバッグ画像のため、dataProvider.areasの私の色の設定は成功しましたが、colorRealは色と等しくなく、マップの表示色はcolorRealです。

どのように修正する必要がありますか？

3.code

は、これは問題がgetAreasが非同期であるため、マップが作成された後、マップエリアを設定しているということである私のコード

(function() { 
    'use strict'; 

    angular.module('dashboard') 
     .controller('DashboardMapCtrl', DashboardMapCtrl); 

    function DashboardMapCtrl(baConfig, layoutPaths, $http) { 
    var layoutColors = baConfig.colors; 
    var areaTb = [{ 
     "id":"CN-34", 
     "title":"中国安徽" 
    }, 
    .......more data...... 
     { 
     "id":"CN-33", 
     "title":"中国浙江" 
     } 
    ]; 
    var http = $http({ 
     method:'POST', 
     url:'http://******' 
    }); 

    function getAreas(http, areaTb) { 
     http.then(function successCallback(response) { 
     angular.forEach(areaTb,function (obj,key) { 
      if(typeof(response.data[obj.title]) != 'undefined') { 
      obj.customData = response.data[obj.title]; 
      obj.color = obj.customData < 100 ? layoutColors.colorLevel1 : 
       (100 <= obj.customData && obj.customData< 500) ? layoutColors.colorLevel2 : 
       (500 <= obj.customData && obj.customData< 1000) ? layoutColors.colorLevel3 : 
       (1000 <= obj.customData && obj.customData< 3000) ? layoutColors.colorLevel4 : 
       (3000 <= obj.customData && obj.customData< 5000) ? layoutColors.colorLevel5 : 
       (5000 <= obj.customData && obj.customData< 7000) ? layoutColors.colorLevel6 : 
       (7000 <= obj.customData && obj.customData< 10000) ? layoutColors.colorLevel7 : 
       (10000 <= obj.customData && obj.customData< 30000) ? layoutColors.colorLevel8 : 
       (30000 <= obj.customData && obj.customData< 50000) ? layoutColors.colorLevel9 : 
       (50000 <= obj.customData && obj.customData< 70000) ? layoutColors.colorLevel10 : 
       (70000 <= obj.customData && obj.customData< 100000) ? layoutColors.colorLevel11 : layoutColors.colorLevel12; 
      } 
     }); 
     }, function errorCallback(response) { 
     }); 
    } 
     getAreas(http, areaTb); 
     console.log(areaTb); 
    var map = AmCharts.makeChart('amChartMap', { 
     type: 'map', 
     theme: 'blur', 
     zoomControl: { zoomControlEnabled: false, panControlEnabled: false }, 
     dataProvider: { 
     map: 'chinaLow', 
     zoomLevel: 1, 
     areas: areaTb 
     }, 
    }); 
    } 
})(); 

Answer 1

です。地図がロードされた後で地図を更新するには、validateDataを地図オブジェクトに呼び出す必要があります。簡単な修正は、直接に領域を割り当てる呼び出しあなたのgetAreasにマップオブジェクトを渡し、その後validateData使用して再描画、すなわち

var map = AmCharts.makeChart('amChartMap', { 
    type: 'map', 
    theme: 'blur', 
    zoomControl: { zoomControlEnabled: false, panControlEnabled: false }, 
    dataProvider: { 
    map: 'chinaLow', 
    zoomLevel: 1, 
    areas: [] 
    }, 
}); 

function getAreas(http, areaTb, map) { 
    http.then(function successCallback(response) { 
    angular.forEach(areaTb,function (obj,key) { 
     if(typeof(response.data[obj.title]) != 'undefined') { 
     obj.customData = response.data[obj.title]; 
     obj.color = obj.customData < 100 ? layoutColors.colorLevel1 : 
      (100 <= obj.customData && obj.customData< 500) ? layoutColors.colorLevel2 : 
      (500 <= obj.customData && obj.customData< 1000) ? layoutColors.colorLevel3 : 
      (1000 <= obj.customData && obj.customData< 3000) ? layoutColors.colorLevel4 : 
      (3000 <= obj.customData && obj.customData< 5000) ? layoutColors.colorLevel5 : 
      (5000 <= obj.customData && obj.customData< 7000) ? layoutColors.colorLevel6 : 
      (7000 <= obj.customData && obj.customData< 10000) ? layoutColors.colorLevel7 : 
      (10000 <= obj.customData && obj.customData< 30000) ? layoutColors.colorLevel8 : 
      (30000 <= obj.customData && obj.customData< 50000) ? layoutColors.colorLevel9 : 
      (50000 <= obj.customData && obj.customData< 70000) ? layoutColors.colorLevel10 : 
      (70000 <= obj.customData && obj.customData< 100000) ? layoutColors.colorLevel11 : layoutColors.colorLevel12; 
     } 
    }); 
    //assign the areas object to the dataProvider, then redraw 
    map.dataProvider.areas = areaTb; 
    map.validateData(); 
    }, function errorCallback(response) { 
    }); 
} 
getAreas(http, areaTb, map); 

また、あなただけの時にgetAreasメソッド内makeChart呼び出しを置くことができることであろう成功コールバック。