D3图表中的颜色序列

时间:2015-10-30 17:49:15

标签: javascript angularjs html5 d3.js

我正在设计一个仪表板,用于测试使用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;
            }
        }
    }
})

请告知我是否做错了什么,我无法解决这个问题。

0 个答案:

没有答案