Angularjs 如何显示AmCharts';漏斗图条形图是否按顺序排列?
我正在使用AmCharts和angularjs构建缺陷优先级漏斗图。一切正常,但它显示的值顺序混乱,如高、低、无状态、中等以及我的计数数据 HTML: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++
控制器:
$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();
}