我正在使用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;
};
}
}
请建议解决方案。
答案 0 :(得分:10)
添加legendColor="colorFunction()"
属性以将相同的颜色应用于图例。