为什么我的 ammap 区域颜色不起作用

Question

1.picture

2.question

由于console调试画面，我在dataProvider.areas中的颜色设置成功，但是colorReal不等于color，地图显示颜色是colorReal。

我该如何解决？

3.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

问题是您在创建地图后设置地图区域，因为 getAreas 是异步的。为了在加载地图后更新地图，您必须在地图对象上调用 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);

或者，您可以在成功回调期间将 makeChart 调用放在 getAreas 方法中。

为什么我的 ammap 区域颜色不起作用

why is my ammap areas color not working

amcharts

angularjs

ammap