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

问题描述

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

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

有什么建议？

>

示例数据：

 < row> 
< category>红色< / category> 
< other_data>这个应该没关系< / other_data> 
< / row> 
< row> 
< category>蓝色< / category> 
< other_data>这个应该没关系< / other_data> 
< / row> 
< row> 
< category>红色< / category> 
< other_data>这个应该没关系< / other_data> 
< / row> 
< row> 
< category>绿色< / category> 
< other_data>这个应该没关系< / other_data> 
< / row> 
  

解决方案

有可能是一个更优雅的方式，或一些效率，但... ...

把你的XML变成一个ArrayCollection对象

{category：red，other_data：无关紧要}
。
。
。

从那里...

  var categoryGroup：GroupingCollection = new GroupingCollection（）; 
 categoryGroup.source = ac; //你是ArrayCollection 
 
 var grouping：Grouping = new Grouping（）; 
 var groupingField：GroupingField = new GroupingField（category）; 
 grouping.fields = [groupingField]; 
 
 categoryGroup.grouping =分组; 
 categoryGroup.refresh（）; 
 
 var categoryAC：ArrayCollection = categoryGroup.getRoot（）as ArrayCollection; 
 
 chart.dataProvider = categoryAC; 
  

除此之外，您必须在图表上做一些魔术......

 < mx：PieChart id =chartheight =100％width =100％> 
< mx：series> 
< mx：PieSeries dataFunction =myDataFunctionlabelFunction =myLabelFunctionlabelPosition =callout/> 
< / mx：series> 
< / mx：PieChart> 
  

您是图表函数处理程序

<$ p
return $（item.children.length）; $ p $ public function myDataFunction（series：Series，item：Object，fieldName：String）


public function myLabelFunction（data：Object，field：String，index：Number，percentValue：Number）：String
{
return data.GroupLabel;
}


这可能有点太重了，有些可扩展到其他情况。

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>

解决方案

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.

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