Angular NVD3 Change Colors In Legends Also

问题

I am using AngularJS wrapper of NVD3 -angularjs-nvd3-directives.

I managed to change colors in the chart but the colors are not reflected in the legends.

Here is the fiddle http://jsfiddle.net/vishal1shukla2/NChH9/1/

<div ng-app='nvd3TestApp'>
  <div ng-controller="ExampleCtrl">
    <nvd3-pie-chart
            data="exampleData"
            id="exampleId"
            showLabels="true"
            x="xFunction()"
            y="yFunction()"
            donut="true"
            donutRatio="0.3"
            donutLabelsOutside="false" width="400" height="400"  color="colorFunction()" showLegend="true" >
                <svg width="600"></svg>
        <svg height="600"></svg>
    </nvd3-pie-chart>

  </div>
</div>

var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);

        function ExampleCtrl($scope){

            $scope.exampleData = [
                {
                    key: "On Hold",
                    y: 5
                },
                {
                    key: "Open",
                    y: 2
                },
                {
                    key: "Closed",
                    y: 9
                }
            ];
            var colorArray = ['#FF0000', '#0000FF', '#FFFF00', '#00FFFF'];
            $scope.colorFunction = function() {
                return function(d, i) {
                    return colorArray[i];
                };
            }
            $scope.xFunction = function(){
                return function(d) {
                    return d.key;
                };
            }
            $scope.yFunction = function(){
                return function(d) {
                    return d.y;
                };
            }

        }

Please suggest the solution.

回答1:

Add the legendColor="colorFunction()" attribute to apply the same colors to the legend.

来源：https://stackoverflow.com/questions/22415490/angular-nvd3-change-colors-in-legends-also