2016-10-22 5 views
0

円チャートを描画するのにAngular-nvd3を使用しています。angle-nvd3グラフでelementClickイベントが発生しない

HTML

<nvd3 options="options.chart.options" data="options.chart.data" api="options.chart.api" config="config" events="events"></nvd3> 

enter image description here

Javascriptを

$scope.options.chart = { 
    options: { 
     chart: { 
      type: 'pieChart', 
      height: 500, 
      margin: { 
       top: 0, 
       right: 40, 
       bottom: 80, 
       left: 40 
      }, 
      x: function(d) { 
       return d.key; 
      }, 
      y: function(d) { 
       return d.y; 
      }, 
      showLabels: true, 
      duration: 1500, 
      labelThreshold: 0.01, 
      showLegend: true, 
      lines: { 
       dispatch: { 
        elementClick: function(e) { 
         console.log('click') 
        }, 
        elementMouseover: function(e) { 
         console.log('mouseover') 
        }, 
        elementMouseout: function(e) { 
         console.log('mouseout') 
        } 
       } 
      } 
     } 
    }, 
    data: [{ 
     key: "One", 
     y: 5 
    }, { 
     key: "Two", 
     y: 2 
    }, { 
     key: "Three", 
     y: 9 
    }, { 
     key: "Four", 
     y: 7 
    }, { 
     key: "Five", 
     y: 4 
    }, { 
     key: "Six", 
     y: 3 
    }, { 
     key: "Seven", 
     y: .5 
    }], 
    api: {} 
}; 

パイ上のユーザーのクリックは、上記のコードがあるchart.Butとき、私は、イベントを呼び出す必要があります助けてください。

答えて

0

基本的には、あなたの要件を満たすためにangularjsのサードパーティのライブラリを使用しているので、第三者への変更はあなたのスコープに反映されていると思われますので$ scope。$ apply()を使用してください。

elementClick: function(e) { 
        $scope.$apply(); 
        console.log('click') 
       } 

私は、これはあなたを助けるでしょう願っています。:)

関連する問題