0

我正在尝试更新渲染地图的数据值。我使用一个 jquery 插件，jVectorMap。

问题是当我尝试更新数据集时，一个新图表会附加到 dom 中，就在旧图表之后。

Plunkr：http ://plnkr.co/edit/eTyLpb3dAJf3AAmjrqDX?p=preview

app.directive('map', function() {
return {
    restrict: 'EAC',
    link: function(scope, element, attrs) {
       scope.$watch("mapdata" , function(n,o){
            $(element).width('auto')
            $(element).height(400)
            $(element).vectorMap({
                backgroundColor: 'transparent',
                regionStyle: { 
                  initial: {
                    fill: '#cccccc'
                  }
                },
                series: {
                    regions: [{ 
                        values: scope.mapdata,
                        scale: ['#C8EEFF', '#0071A4'],
                        normalizeFunction: 'polynomial'
                    }]
                },
            });              
        });              
    }
};
});

另一种方法可能是这样的：

app.directive('map', function() {
return {
    restrict: 'EAC',
    link: function(scope, element, attrs) {
      var chart = null;

      var data = scope.datamap;
       scope.$watch("data" , function(n,o){ 
         if(!chart){
            $(element).width('auto')
            $(element).height(400)
            chart = $(element).vectorMap({})
         }else{
            chart.vectorMap('set', 'colors', {us: '#000000'});
            console.log(chart)
         }
      });              
    }
};
});

Plunkr： http ://plnkr.co/edit/ib3Rgz?p=preview

使用这种方法，我可以更改背景颜色，但不能更改状态颜色...

4

1 回答 1

1

jVectorMap 正在将新地图附加到元素。

你可以：

  1. 在更新之前清除元素element.empty();（plunker：http ://plnkr.co/edit/i8q39s?p=preview ）

  2. 抓取矢量图的mapObject：

    var mapobject = element.vectorMap('get', 'mapObject');

    并使用范围数据从手表更新它。这种方式可能更“棱角分明”。

于 2013-09-30T05:01:49.567 回答