如何为传奇获得正确的自定义颜色

时间:2015-02-02 15:24:44

标签: angularjs angularjs-nvd3-directives

圆环图的自定义颜色未在图例中显示,而图例则采用任意颜色。如何让它拾取那些自定义颜色?

app.controller("ExampleController", ["$scope", function ($scope) {
        $scope.pie = [
            {key: "Passed", y: 2},
            {key: "Failed", y: 3}
        ];

        var colorArray = ['red', 'green'];
        $scope.colorFunction = function() {
            return function(d, i) {
                return colorArray[i];
            };
        };
        ...x y functions ...
}]);

HTML

...
    <nvd3-pie-chart
            data="pie"
            id="donutLabelsOutsideExample"
            width="450"
            height="350"
            x="xFunction()"
            y="yFunction()"
            donut="true"
            showLabels="true"
            showLegend="true"
            donutLabelsOutside="true"
            labelType="percent"
            color="colorFunction()">
        <svg height="250"></svg>
    </nvd3-pie-chart>
...

Legend screenshot

1 个答案:

答案 0 :(得分:1)

饼图的source code包含legendcolor的属性,因此您可以尝试添加该属性。

legendcolor="colorFunction()"

为什么会这样:

  1. pieChart的控制器中,有checkElementID来电,后者拨打configureLegend
  2. configureLegend位于source code,其代码为
  3. chart.legend.color(attrs.legendcolor === undefined ? nv.utils.defaultColor() : scope.legendcolor());

    attrs.legendcolor是从您的指令属性中提取的。