如何在Flex饼图中显示分组的XML数据？

问题描述：

我已经研究了用GroupingCollections和AdvancedDataGrids分组XML数据，但我无法弄清楚如何在图表中显示该数据。如何在Flex饼图中显示分组的XML数据？

基本上，我想要做的是按类别字段分组数据，这应该给我两行下红色，一个下蓝色，一个下绿色。将此数据输入到饼图时，它应占用适当的空间量（红色为1/2，蓝色和绿色为1/4）。我不需要other_data字段，因为我想使用组名称（在本例中为类别）作为标注。

有什么建议吗？

的样本数据：

<row> 
    <category>red</category> 
    <other_data>this shouldn't really matter</other_data> 
</row> 
<row> 
    <category>blue</category> 
    <other_data>this shouldn't really matter</other_data> 
</row> 
<row> 
    <category>red</category> 
    <other_data>this shouldn't really matter</other_data> 
</row> 
<row> 
    <category>green</category> 
    <other_data>this shouldn't really matter</other_data> 
</row>

@Mike我能够将数据拉入GroupingCollection并将其输出到AdvancedDataGrid中（并且它已正确分组），但是当我试图定义图表的dataSource属性时，它会出错并且不显示。 – mclaughlinj 2010-06-10 16:00:57

答

我会拍摄。有可能是一个更优雅的方式，或者一些效率，但是......

把你的XML转换对象

的ArrayCollection {类：“红”，other_data：“不要紧”} 。。。

从那里......

var categoryGroup:GroupingCollection=new GroupingCollection(); 
categoryGroup.source=ac; // you're ArrayCollection 

var grouping:Grouping=new Grouping(); 
var groupingField:GroupingField=new GroupingField("category"); 
grouping.fields=[groupingField]; 

categoryGroup.grouping=grouping; 
categoryGroup.refresh(); 

var categoryAC:ArrayCollection=categoryGroup.getRoot() as ArrayCollection; 

chart.dataProvider=categoryAC;

除此之外，你必须做在图表上一些神奇......

<mx:PieChart id="chart" height="100%" width="100%"> 
    <mx:series> 
     <mx:PieSeries dataFunction="myDataFunction" labelFunction="myLabelFunction" labelPosition="callout"/> 
    </mx:series> 
</mx:PieChart>

你的图表功能处理

public function myDataFunction(series:Series, item:Object, fieldName:String):Object 
{ 
    return (item.children.length); 
} 

public function myLabelFunction(data:Object, field:String, index:Number, percentValue:Number):String 
{ 
    return data.GroupLabel; 
}

这可能有点过于沉重，但它会做到这一点，并且可以在某种程度上扩展到其他方案。

如何在Flex饼图中显示分组的XML数据？

相关推荐