如何按排序顺序显示AmCharts的漏斗图条形图？

Question

我正在使用amcharts和angularjs来构建缺陷优先级漏斗图。一切正常，但是它以高度，低，无状态，媒介以及我的计数数据以及我的数量数据显示出值。

。

html：

<div id="funnelChart" class="admin-chart" ng-controller="DefectCtrl" ng-init="defectPrioirtyFunnelChart()"></div>

控制器：

$scope.defectPrioirtyFunnelChart= function(data){
            $scope.data =data;
            $scope.graphData=[];
           for( var i=0;i<$scope.data.length;i++){
               if($scope.data[i].priority == ""){
                   $scope.data[i].priority = "No Priority";
               }
            $scope.graphData.push({priority:$scope.data[i].priority,
                count:$scope.data[i].priorityCnt }) 
           }

            var layoutColors = baConfig.colors;
            var id = $element[0].getAttribute('id');
            var chart = AmCharts.makeChart("funnelChart", {
                type: 'funnel',
                theme: 'blur',
                colors: ["#209e91", "#FF6600", "#FFFF4D", "#e85656", "#FF9E01", "#0D8ECF"],
                labelTickColor: layoutColors.borderDark,
                dataProvider:$scope.graphData ,
                titleField: 'priority',
                marginRight: 160,
                marginLeft: 15,
                labelPosition: 'right',
                funnelAlpha: 0.9,
                valueField: 'count',
                startX: 0,
                alpha: 0.8,
                neckWidth: '0%',
                startAlpha: 0,
                outlineThickness: 1,
                neckHeight: '0%',
                balloonText: '[[priority]]:<b>[[count]]</b>',
                export: {
                  enabled: true
                },
                creditsPosition: 'bottom-left',
                pathToImages: layoutPaths
              });
            chart.dataProvider = $scope.graphData;
            chart.validateData();
        }

我想以此顺序显示缺陷优先级图表(高，中，低，无状态(。我该怎么做？

Answer 1

amcharts以接收到的顺序显示数据，第一个数据元素位于漏斗的底部，最后一个元素在尖端。您需要按照所需的顺序手动对数据进行分类，即第一个元素= high，second = med等

如果您还希望显示"无状态"切片，则需要将showZeroSlices设置为true。

这是您的代码的简化版本，可以说明以下内容：

var chart = AmCharts.makeChart("funnelChart", {
    type: 'funnel',
    theme: 'blur',
    colors: ["#209e91", "#FF6600", "#FFFF4D", "#e85656", "#FF9E01", "#0D8ECF"],
    dataProvider:[{
      "count": 60,
      "priority": "High"
    },{
      "count": 50,
      "priority": "Med"
    },{
      "count": 30,
      "priority": "Low"
    }, {
      "count": "",
      "priority": "No status"
    }],
    showZeroSlices: true,
    titleField: 'priority',
    marginRight: 160,
    marginLeft: 15,
    labelPosition: 'right',
    funnelAlpha: 0.9,
    valueField: 'count',
    startX: 0,
    alpha: 0.8,
    neckWidth: '0%',
    startAlpha: 0,
    outlineThickness: 1,
    neckHeight: '0%',
    balloonText: '[[priority]]:<b>[[count]]</b>',
    export: {
      enabled: true
    },
    creditsPosition: 'bottom-left'
  });

<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/funnel.js"></script>
<div id="funnelChart" style="width: 100%; height: 300px;"></div>