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按接收顺序显示数据，第一个数据元素位于漏斗底部，最后一个元素位于提示位置。您需要按照您想要的顺序手动对数据进行排序，即第一个元素=高，第二个= Med等。

如果你还想要＆＃34;没有状态＆＃34;要显示切片，您需要将showZeroSlices设置为true。

以下是代码的简化版本，用于说明这一点：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: