NVD3円グラフの色を変更するにはどうすればいいですか

NVD3フレームワークの使い方を学んでいます。 krispoのgithubの例を使って円グラフをカスタマイズしました。どのようにして円グラフの各くさびの色を変更できますか？ここでNVD3円グラフの色を変更するにはどうすればいいですか

は、私がこれまで持っているものです。http://plnkr.co/edit/QYuol3Q10xsA3pziiWGl?p=preview

var app = angular.module('plunker', ['nvd3']); 

app.controller('MainCtrl', function($scope) { 
    $scope.options = { 
     chart: { 
      type: 'pieChart', 
      height: 500, 
      x: function(d){return d.key;}, 
      y: function(d){return d.y;}, 
      showLabels: false, 
      duration: 500, 
      labelThreshold: 0.01, 
      labelSunbeamLayout: true, 
      legend: { 
       margin: { 
        top: 5, 
        right: 35, 
        bottom: 5, 
        left: 0 
       } 
      } 
     } 
    }; 

    $scope.data = [ 
     { 
      key: "CAT I", 
      y: 2 
     }, 
     { 
      key: "CAT II", 
      y: 3 
     }, 
     { 
      key: "CAT III", 
      y: 1 
     }, 
    ]; 
});

私はそれが次のようになりたい：

私はちょうど方法や場所私ができるかわかりませんこれを行う？

出典

2016-06-17 Kode_12

です円グラフの内容に興味があるのは、青、黄、aこの例に示すように赤色？ – runningviolent

正確には、thats正しい –

チャートにcolor:['#FFC455', '#00A6CD', '#CE1B1F'],を追加します。

chart: { 
     color:['#FFC455', '#00A6CD', '#CE1B1F'], 
     type: 'pieChart', 
     height: 500, 
     x: function(d){return d.key;}, 
     y: function(d){return d.y;}, 
     showLabels: false, 
     duration: 500, 
     labelThreshold: 0.01, 
     labelSunbeamLayout: true, 
     legend: { 
      margin: { 
       top: 5, 
       right: 35, 
       bottom: 5, 
       left: 0 
      } 
     } 
    }

あなたが例の背景色を模倣したい場合は、へ<body>タグを変更します。

<body ng-controller="MainCtrl" style="background-color: #2F2F2F">

出典

2016-06-17 17:42:29 runningviolent

以下のようなスクリプトを変更してください。

ここでの作業例を参照してください。

http://plnkr.co/edit/0nETt0rPnfbtJUevYBpX?p=preview

<script type="text/javascript"> 
    var app = angular.module('plunker', ['nvd3']); 

app.controller('MainCtrl', function($scope) { 

    $scope.color = ['red','blue','green']; 

    $scope.options = 
    { 
      chart: { 
       type: 'pieChart', 
       height: 500, 
       x: function(d){return d.key;}, 
       y: function(d){return d.y;}, 
       showLabels: false, 
       duration: 500, 
       labelThreshold: 0.01, 
       labelSunbeamLayout: true, 
       legend: { 
        margin: { 
         top: 5, 
         right: 35, 
         bottom: 5, 
         left: 0 
        } 
       }, 
       color:function(d) 
       { 
        console.log(d); 
        return $scope.color[d.y]; 

       } 
      } 
     }; 

     $scope.data = [ 
      { 
       key: "CAT I", 
       y: 2 
      }, 
      { 
       key: "CAT II", 
       y: 3 
      }, 
      { 
       key: "CAT III", 
       y: 1 
      }, 
     ]; 
}); 

</script>

出典

2016-06-17 17:42:20

NVD3円グラフの色を変更するにはどうすればいいですか

答えて

関連する問題