【问题标题】:Angular NVD3 Change Colors In Legends AlsoAngular NVD3 也更改图例中的颜色
【发布时间】:2014-03-14 20:50:15
【问题描述】:

我正在使用 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;
                };
            }

        }

请提出解决方案。

【问题讨论】:

    标签: angularjs nvd3.js


    【解决方案1】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-10-08
      • 1970-01-01
      • 2014-12-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-05-24
      • 2014-05-24
      相关资源
      最近更新 更多