如何更改 NVD3 饼图的颜色答案

【问题标题】：How can I change the colors of the NVD3 Pie Chart如何更改 NVD3 饼图的颜色
【发布时间】：2016-06-17 17:20:16
【问题描述】：

我正在学习如何使用 NVD3 框架。我使用 krispo 的 github 中的示例自定义了一个饼图。如何更改饼图中每个楔形的颜色？

这是我目前所拥有的：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
        },
    ];
});

我希望它看起来类似于以下内容：

我只是不确定如何或在哪里可以做到这一点？

【问题讨论】：

您是否对示例中显示的蓝色、黄色和红色的饼图内容感兴趣？
没错，没错

标签： javascript angularjs d3.js nvd3.js

【解决方案1】：

将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">

【讨论】：

【解决方案2】：

如下更改脚本。

在此处查看工作示例。

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>

【讨论】：