1

ドーナツ チャートのカスタム色が凡例に表示されず、凡例が任意の色になります。これらのカスタムカラーをピックアップするにはどうすればよいですか?

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>
...

凡例のスクリーンショット

4

1 に答える 1

1

円グラフのソース コードlegendcolorには の属性が含まれているので、その属性を追加してみてください。

legendcolor="colorFunction()"

機能する理由:

  1. のコントローラーにpieChartはcheckElementID、次に呼び出す呼び出しがありますconfigureLegend
  2. configureLegendソースコードにあり、次のコードがあります

chart.legend.color(attrs.legendcolor === undefined ? nv.utils.defaultColor() : scope.legendcolor());

attrs.legendcolorディレクティブ属性から取得されます。

于 2015-02-02T16:20:52.457 に答える