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

时间:2013-09-30 03:35:41

标签: angularjs

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

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

1 个答案:

答案 0 :(得分:1)

jVectorMap将新地图附加到元素。

你可以:

  1. 在使用element.empty();(plunker:http://plnkr.co/edit/i8q39s?p=preview
  2. 进行更新之前清除元素
  3. 抓住矢量地图的mapObject:

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

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