如何按排序順序顯示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的漏斗圖表欄？

回答

相關問題