Angularjs 如何显示AmCharts';漏斗图条形图是否按顺序排列?

Angularjs 如何显示AmCharts';漏斗图条形图是否按顺序排列?,angularjs,angularjs-directive,amcharts,Angularjs,Angularjs Directive,Amcharts,我正在使用AmCharts和angularjs构建缺陷优先级漏斗图。一切正常,但它显示的值顺序混乱,如高、低、无状态、中等以及我的计数数据 HTML: 控制器: $scope.defectPrioirtyFunnelChart= function(data){ $scope.data =data; $scope.graphData=[]; for( var i=0;i<$scope.data.length;i++

我正在使用AmCharts和angularjs构建缺陷优先级漏斗图。一切正常,但它显示的值顺序混乱,如高、低、无状态、中等以及我的计数数据

HTML:


控制器:

$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();
        }
$scope.defectPrioirtyFunnelChart=函数(数据){
$scope.data=数据;
$scope.graphData=[];

对于(var i=0;iAmCharts,数据图表按接收顺序显示数据,第一个数据元素位于漏斗底部,最后一个元素位于漏斗顶部。您需要手动按所需顺序对数据进行排序,即第一个元素=高,第二个元素=中等,等等

如果还希望显示“无状态”切片,则需要将其设置为true

下面是代码的简化版本来说明这一点:

var chart=AmCharts.makeChart(“漏斗图”{
类型:'漏斗',
主题:“模糊”,
颜色:[“209e91”、“FF6600”、“FFFF4D”、“e85656”、“FF9E01”、“0D8ECF”],
数据提供者:[{
“计数”:60,
“优先级”:“高”
},{
“计数”:50,
“优先级”:“Med”
},{
“计数”:30,
“优先级”:“低”
}, {
“计数”:“,
“优先级”:“无状态”
}],
是的,
titleField:“优先权”,
marginRight:160,
marginLeft:15,
标签位置:'右',
漏斗:0.9,
valueField:'计数',
startX:0,
阿尔法:0.8,
颈部宽度:“0%”,
星塔法:0,
概要问题:1,
颈部高度:“0%”,
BallooText:“[[priority]]:[[count]]”,
出口:{
已启用:true
},
creditsPosition:“左下角”
});

请提供您的代码好吗?
$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();
        }