Question

我正在尝试更新渲染的地图图表的数据值。我使用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

通过这种方法，我可以改变背景颜色，但不能改变状态颜色......

Answer 1

jVectorMap将新地图附加到元素。

你可以：

在使用element.empty();（plunker：http://plnkr.co/edit/i8q39s?p=preview）
抓住矢量地图的mapObject：
```
var mapobject = element.vectorMap('get', 'mapObject');
```
并使用范围数据从手表更新它。这种方式可能更“棱角分明”。

AngularJs jquery插件地图图表数据更新

1 个答案: