How do I display grouped XML data in a Flex pie chart?

问题

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.

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.

Any suggestions?

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

回答1:

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

Turn your XML into an ArrayCollection of objects

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

From there...

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>

You're chart function handlers

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.

来源：https://stackoverflow.com/questions/3010110/how-do-i-display-grouped-xml-data-in-a-flex-pie-chart

标签

xml

apache-flex