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

Question

我已经研究了使用GroupingCollections和AdvancedDataGrids对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>

Answer 1

我会开枪。 可能有一种更优雅的方法，或者有些效率，但是...

将您的XML转换为对象的ArrayCollection

{category：“ red”，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;
}

这可能有点太重，但是可以解决问题，并且在其他情况下可以扩展。