Comment afficher des données XML groupées dans un diagramme à secteurs Flex?

Question

J'ai examiné le regroupement de données XML avec GroupingCollections et AdvancedDataGrids, mais je n'arrive pas à comprendre comment afficher ces données dans un graphique. Fondamentalement, ce que je veux faire est de regrouper les données par le champ catégorie, ce qui devrait me donner deux lignes sous rouge, une sous bleu, et un sous vert. Lors de la saisie de ces données dans le camembert, il devrait prendre la bonne quantité d'espace (1/2 pour le rouge, 1/4 pour le bleu et le vert). Je n'ai pas besoin du champ other_data, car j'aimerais utiliser le nom du groupe (catégorie dans ce cas) comme légende.

Des suggestions?

données de l'échantillon:

<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

Je vais prendre une photo. Il y a probablement une façon plus élégante, ou des gains d'efficience, mais ...

Transformez votre XML en un ArrayCollection d'objets

{catégorie: « rouge », other_data: « n'a pas d'importance »} . . .

A partir de là ...

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; 

Autre que cela, vous aurez à faire de la magie sur le graphique ...

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

Vous êtes des gestionnaires de la fonction graphique

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

Cela peut être un peu trop lourd, mais cela va faire l'affaire et est quelque peu extensible à d'autres scénarios.