如何按排序顺序显示AmCharts的漏斗图表栏？

我正在使用AmCharts和angularjs构建缺陷优先级漏斗图。一切工作正常，但它显示的数值无序，如高，低，无状态，中等以及我的计数数据。如何按排序顺序显示AmCharts的漏斗图表栏？

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(); 
     }

我想在这个为了显示我的缺陷优先图表酒吧（高，中，低，无状态）。我怎样才能做到这一点？

来源

2017-05-02 user3114967

你能提供你的代码，好吗？ – Mistalis

AmCharts按收到的顺序显示数据，第一个数据元素位于漏斗的底部，最后一个元素位于尖端。您需要按您想要的顺序手动对数据进行排序，即第一个元素=高，第二个= Med等

如果您还希望显示“无状态”片段，则需要将showZeroSlices设置为真正。

这是你的代码的简化版本，来说明这一点：

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>

来源

2017-05-02 19:38:18 xorspark

如何按排序顺序显示AmCharts的漏斗图表栏？

回答

相关问题