角NVD3更改颜色在LOL还 [英] Angular NVD3 Change Colors In Legends Also

问题描述

我使用NVD3 -angularjs-nvd3-指令AngularJS包装。

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.

下面是小提琴
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.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;
                };
            }

        }

请建议的解决方案。

推荐答案

添加 legendColor =ColorFunction的（）属性相同的颜色应用到传奇。

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

这篇关于角NVD3更改颜色在LOL还的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！