Как я могу изменить цвета диаграммы NVD3

Я изучаю, как использовать инфраструктуру NVD3. Я настроил круговую диаграмму, используя пример из krispo's 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

ли вы заинтересованы в том, чтобы содержимое круговой диаграммы было синим, желтым, nd красный, как показано в примере? – runningviolent

точно, thats correct –

Добавить 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

ответ

Смежные вопросы