如何在 Flex 饼图中显示分组的 XML 数据? [英] How do I display grouped XML data in a Flex pie chart?

问题描述

我研究过使用 GroupingCollections 和 AdvancedDataGrids 对 XML 数据进行分组，但我不知道如何在图表中显示这些数据.

I've looked into grouping XML data with GroupingCollections and AdvancedDataGrids, but I can't figure out how to display that data in a chart.

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

Basically, what I want to do is group the data by the category field, which should give me two rows under red, one under blue, and one under green. When inputting this data into the pie chart, it should take up the right amount of space (1/2 for red, 1/4 each for blue and green). I don't need the other_data field, as I'd like to use the group name (category in this case) as the callout.

有什么建议吗?

示例数据:

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

推荐答案

我来试一试.可能有更优雅的方式，或者一些效率，但是...

I'll take a shot. There is probably a more elegant way, or some efficiencies, but...

将您的 XML 转换为对象的 ArrayCollection

Turn your XML into an ArrayCollection of objects

{ category: "red", other_data: "没关系" }...

{ category: "red", other_data: "doesn't matter" } . . .

从那里...

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;

除此之外，您还需要在图表上施展魔法...

Other than that, you'll have to do some magic on the chart...

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

这可能有点太重了，但它可以解决问题并且可以扩展到其他场景.

That may be a bit too heavy, but it will do the trick and is somewhat extensible to other scenarios.

这篇关于如何在 Flex 饼图中显示分组的 XML 数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！