我正在设计一个仪表板,用于测试使用REST api检索的数据的状态。为此,我设计了一个angularjs应用程序。我为图表创建了一个指令,虽然它工作正常,但颜色序列不一致。我想要以下顺序:
Unexecuted: Grey
Pass: Green
Fail: Red
Work in Progress: Orange
Blocked: Blue
N/A: Black
问题是当我只有Pass和Blocked(大于0且休息为0)时,Blocked的颜色显示为RED(这是Fail的颜色),即它采用下一个定义的颜色。 / p>
这是我的代码:
app.directive('chart', function($http) {
return {
restrict: 'EA',
scope: {
data: '=data',
outerR: '=outerR',
innerR: '=innerR',
fontSize: '=fontSize',
displayNumber: '=displayNumber',
innerString: '=innerString',
innerStringFontSize: '=innerStringFontSize',
},
link: function($scope, elements, attrs) {
var data;
if ($scope.data) {
data = $scope.data;
} else {
data = [0, 0, 0, 0, 0, 0];
}
$scope.$watch('data', function() {
console.log('render data');
data = $scope.data;
render();
})
function render() {
var canvas = d3.select("#chartDiv").append("svg").attr("width", outerR * 2).attr("height", outerR * 2);
var group = canvas.append("g").attr("transform", "translate(" + outerR + "," + outerR + ")");
var arc = d3.svg.arc().innerRadius(innerR).outerRadius(outerR);
var pie = d3.layout.pie();
var arcs = group.selectAll(".arc").data(pie(data)).enter().append("g").attr("class", "arc");
arcs.append("path").attr("d", arc).attr("fill", function(d) {
return color(d.data);
});
if ($scope.displayNumber != false) {
arcs.append("text").attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
}).
attr("text-anchor", "middle").attr("font-size", fontSize + "px").text(function(d) {
return d.data;
});
}
};
var color = d3.scale.ordinal().range(["grey", "green", "red", "orange", "blue", "black"]);
if ($scope.outerR) {
var outerR = $scope.outerR;
} else {
var outerR = 100;
}
if ($scope.inner) {
var innerR = $scope.innerR;
} else {
var innerR = 50;
}
if ($scope.fontSize) {
var fontSize = $scope.fontSize;
} else {
var fontSize = 17 * outerR / 100;
}
if ($scope.innerStringFontSize) {
var innerStringFontSize = $scope.innerStringFontSize;
} else {
var innerStringFontSize = innerR / 3;
}
}
}
})
请告知我是否做错了什么,我无法解决这个问题。