[英]Flex Bubblechart Data Structure
I have been trying to represent the following data in a Flex Bubblechart.See the chart code below as well. 我一直试图在Flex Bubblechart中表示以下数据。也请参见下面的图表代码。
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
var BBCData:ArrayCollection= new ArrayCollection([
{Industry: "In1", Range:"0-10 Days", lcount:10},
{Industry: "In1", Range:"10-20 Days", lcount:20},
{Industry: "In1", Range:"20-30 Days", lcount:30},
{Industry: "In1", Range:"30-40 Days", lcount:40},
{Industry: "In1", Range:"40-50 Days", lcount:50},
{Industry: "In2", Range:"0-10 Days", lcount:10},
{Industry: "In2", Range:"10-20 Days", lcount:20},
{Industry: "In2", Range:"20-30 Days", lcount:30},
{Industry: "In2", Range:"30-40 Days", lcount:40},
{Industry: "In2", Range:"40-50 Days", lcount:50}
]);
]]>
</fx:Script>
<mx:BubbleChart id="PriorityLowBubbleChart" width="400" height="250"
minRadius="1"
maxRadius="50" dataProvider="{BBCData}"
showDataTips="true">
<mx:verticalAxis>
<mx:CategoryAxis categoryField="Range" dataProvider="{BBCData}"/>
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Industry" dataProvider="{BBCData}"/>
</mx:horizontalAxis>
<mx:series>
<mx:BubbleSeries dataProvider="{BBCData}" radiusField="lcount">
</mx:BubbleSeries>
</mx:series>
</mx:BubbleChart>
And the Bubble chart I get is not what I expect. 我得到的气泡图不是我期望的。 I am looking at the Bubblechart to show bubbles with radius as "count" and the X and Y are denoted by Industry and Range respectively. 我正在查看气泡图,以半径为“ count”显示气泡,并且X和Y分别由Industry和Range表示。 So for example, the chart should show a circle of radious 10 at the intersection of Industry In1 and Range 0-10 Days. 因此,例如,图表应在“行业In1”和“ 0-10天范围”的交点处显示一个半径10的圆。
In reality, I get the following graph 实际上,我得到以下图表
So for every data point it creates a new X item ("in1" repeated 5 times, "in2" repeated 5 times), in actual, it should be just one.Same is the case with y-marks. 因此,对于每个数据点,它都会创建一个新的X项(“ in1”重复5次,“ in2”重复5次),实际上,它应该只是一个。y标记也是如此。
It appears the chart is not able to group same field values on both the axes and hence this problem 似乎图表无法在两个轴上对相同的字段值进行分组,因此出现此问题
is there a different data structure needs to be employed, or are there chart settings that solve this? 是否需要使用不同的数据结构,或者是否有解决方案的图表设置?
I am able to show bubble in bubble chart, Please find below code, which may give you some idea. 我可以在气泡图中显示气泡,请在下面的代码中找到,这可能会给您一些想法。 I have commented few lines you can uncomment it and view the result, for you actual result you have to work little more on it and understand GroupingCollection concept. 我注释了几行,您可以取消注释它并查看结果,对于实际结果,您需要多做一些工作并了解GroupingCollection概念。 for refrel link How do I display grouped XML data in a Flex pie chart? refrel链接如何在Flex饼图中显示分组的XML数据? : - :-
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.charts.series.BubbleSeries;
import mx.collections.ArrayCollection;
[Bindable]
public var BBCData:ArrayCollection = new ArrayCollection([
{id:1, Industry: "In1", Range:"0-10 Days", lcount:10},
{id:2, Industry: "In1", Range:"10-20 Days", lcount:20},
{id:3, Industry: "In1", Range:"20-30 Days", lcount:30},
{id:4, Industry: "In1", Range:"30-40 Days", lcount:40},
{id:5, Industry: "In1", Range:"40-50 Days", lcount:50},
{id:6, Industry: "In2", Range:"0-10 Days", lcount:10},
{id:7, Industry: "In2", Range:"10-20 Days", lcount:20},
{id:8, Industry: "In2", Range:"20-30 Days", lcount:30},
{id:9, Industry: "In2", Range:"30-40 Days", lcount:40},
{id:10, Industry: "In2", Range:"40-50 Days", lcount:50}
]);
protected function verticalLabelFunction(value:Object, pre:Object, axis:Object, item:Object):Object
{
return item.Range;
}
protected function horizontalLabelFunction(value:Object, pre:Object, axis:Object, item:Object):Object
{
return item.Industry;
}
private function clickHandler():void
{
horizontalAxisID.labelFunction = horizontalLabelFunction;
horizontalAxisID.displayName = "Industry";
verticalAxisID.labelFunction = verticalLabelFunction
verticalAxisID.displayName = "Range";
var columnSeries:Array = new Array();
var series:BubbleSeries = new BubbleSeries();
series.radiusField = "lcount";
//Solution 1 - OutPut as per your dataProvider
horizontalAxisID.categoryField = series.xField = "id";
verticalAxisID.categoryField = series.yField = "id";
//Solution 2 - OutPut as per your dataProvider
//verticalAxisID.categoryField = series.yField = "Range";
//horizontalAxisID.categoryField = series.xField = "Industry";
columnSeries.push(series);
PriorityLowBubbleChart.series = columnSeries;
series.percentWidth = 100;
series.percentHeight = 100;
PriorityLowBubbleChart.dataProvider = BBCData;
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:BubbleChart id="PriorityLowBubbleChart" width="400" height="250"
minRadius="1" maxRadius="50" dataProvider="{BBCData}" showDataTips="true"
creationComplete="clickHandler()" >
<mx:horizontalAxis>
<mx:CategoryAxis id="horizontalAxisID" categoryField="id" />
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:CategoryAxis id="verticalAxisID" categoryField="id" />
</mx:verticalAxis>
</mx:BubbleChart>
</s:Application>
Or another way to achive what you are looking is as below: - 或达成您所寻找内容的另一种方式如下:-
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.charts.series.BubbleSeries;
import mx.collections.ArrayCollection;
import mx.utils.ObjectUtil;
[Bindable]
private var BBCData:ArrayCollection = new ArrayCollection([
{id:1, Industry: "In1", Range:"0-10 Days", lcount:10},
{id:2, Industry: "In1", Range:"10-20 Days", lcount:20},
{id:3, Industry: "In1", Range:"20-30 Days", lcount:30},
{id:4, Industry: "In1", Range:"30-40 Days", lcount:40},
{id:5, Industry: "In1", Range:"40-50 Days", lcount:50},
{id:6, Industry: "In2", Range:"0-10 Days", lcount:10},
{id:7, Industry: "In2", Range:"10-20 Days", lcount:20},
{id:8, Industry: "In2", Range:"20-30 Days", lcount:30},
{id:9, Industry: "In2", Range:"30-40 Days", lcount:40},
{id:10, Industry: "In2", Range:"40-50 Days", lcount:50}
]);
protected function verticalLabelFunction(value:Object, pre:Object, axis:Object, item:Object):Object
{
return item.Range;
}
protected function horizontalLabelFunction(value:Object, pre:Object, axis:Object, item:Object):Object
{
return item.Industry;
}
[Bindable]
public var range:Array = [
{Range:"0-10 Days"},
{Range:"10-20 Days"},
{Range:"20-30 Days"},
{Range:"30-40 Days"},
{Range:"40-10 Days"}
];
[Bindable]
public var industry:Array = [
{Industry: "In1"},
{Industry: "In2"}
];
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Panel title="Line Chart">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:BubbleChart id="myChart"
dataProvider="{BBCData}"
showDataTips="true"
maxRadius="50" minRadius="1">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{industry}"
categoryField="Industry"
displayName="Industry"
labelFunction="horizontalLabelFunction"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{range}"
categoryField="Range"
displayName="Range"
labelFunction="verticalLabelFunction"/>
</mx:verticalAxis>
<mx:series>
<mx:BubbleSeries xField="Industry" yField="Range"
displayName="Industry" radiusField="lcount"/>
</mx:series>
</mx:BubbleChart>
</s:Panel>
</s:Application>
Hope this may help you.... 希望这对您有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.