角度NVD3也改变了传说中的颜色

时间:2014-03-14 20:50:16

标签: angularjs nvd3.js

我正在使用NVD3 -angularjs-nvd3-directives的AngularJS包装器。

我设法改变了图表中的颜色,但颜色没有反映在图例中。

这是小提琴 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;
                };
            }

        }

请建议解决方案。

1 个答案:

答案 0 :(得分:10)

添加legendColor="colorFunction()"属性以将相同的颜色应用于图例。