why is my ammap areas color not working

Question

1.picture

2.question

due to the console debug picture,my color setting in dataProvider.areas is success,but the colorReal is not equals to color and the map display color is colorReal.

How should I fix it?

3.code

This is my code

(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

The issue is that you're setting the map areas after the map has been created since getAreas is asynchronous. In order to update the map after the map is loaded, you have to call validateData on the map object. An easy fix would be to pass the map object into your getAreas call, assign the areas to it directly and then redraw using validateData, i.e.

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);

Alternatively, you can just put the makeChart call inside the getAreas method during the success callback.