Question

我正在学习如何使用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
        },
    ];
});

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

我只是不确定我能做到这一点的方式或地点？

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

Answer 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>

如何更改NVD3饼图的颜色

2 个答案: