2016-09-11 8 views
1

ビューと日付のグラフを作成したいと思います。だから私はangle-nvd3プラグインを使った。グラフが正常に表示されています。私はすべてのdescrete bar要素に同じ色を持っています。私はmoseoverイベントで特定のバーの色を変更する必要があります。私は以下の方法を試みた。descrip barの色を変更する方法onmouseover - angular-nvd3

(1) d3.select(this).atrr('rect').style('fill':'red'); 
(2) $scope.options.chart[e.index].color = "#222"; 

しかし、それらのうちは機能していません。これを行う方法はありますか?

$scope.options = { 
    chart: { 
    type: 'discreteBarChart', 
    height: 450, 
    x: function(d){return d.label;}, 
    y: function(d){return d.value;}, 
    showValues: false, 
    transitionDuration: 500, 
    xAxis: { 
    axisLabel: 'Month' 
    }, 
    yAxis: { 
      axisLabel: 'Views', 
      axisLabelDistance: 10, 
      tickFormat: function (d) { 
        return d3.format('k')(d); 
      } 
     }, 
    color: ['#59ade8'], 
    dispatch: { 
       tooltipShow: function(e){ }, 
       tooltipHide: function(e){}, 
       beforeUpdate: function(e){} 
      }, 
      discretebar: { 
       dispatch: { 
       //chartClick: function(e) {console.log("! chart Click !")}, 
       elementClick: function(e) { 
        selected_element = e; 
        setVisibility(); 
       }, 
       elementMouseout: function(e) {}, 
       elementMouseover: function(e) { 
        d3.select(e).color = '#222' 
       } 
       } 
      } 
    } 
    } 

    $scope.data = [{ 
    values: [{ 
    "label" : "10" , 
    "value" : 50 
    },{ 
    "label" : "11" , 
    "value" : 20 
    },{ 
    "label" : "13" , 
    "value" : 60 
    },{ 
    "label" : "14" , 
    "value" : 90 
    },{ 
    "label" : "15" , 
    "value" : 40 
    },{ 
    "label" : "16" , 
    "value" : 50 
    },{ 
    "label" : "17" , 
    "value" : 30 
    }] 
}]; 
+0

私は決して角度を使用しませんでしたが、純粋なD3コードはこれです: 'd3.select(this)).style( 'fill'、 'red')'。返信いただきありがとうございます。 –

+0

"d3.min.js:1:Uncaught TypeError:未定義の 'setProperty'プロパティを読み取れません" –

答えて

0

$ scope.apply()関数を使用して問題を解決しました。良い一日にしてくれた。私は各バーの色を変更します。

関連する問題