0

レンダリングされたマップ チャートのデータ値を更新しようとしています。jquery プラグイン jVectorMap を使用しています。

問題は、データセットを更新しようとすると、古いグラフの直後に新しいグラフが dom に追加されることです。

プランク: 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)
         }
      });              
    }
};
});

プランク: 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 に答える