Apache flex Flex Bubblechart数据结构

我一直在尝试用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>

我得到的气泡图并不是我所期望的。我在看Bubblechart以显示半径为“计数”的气泡，X和Y分别由行业和范围表示。 因此，举例来说，图表应显示1天内工业交叉点处的radious 10圆圈，范围为0-10天

实际上，我得到了下面的图表

因此，对于每个数据点，它都会创建一个新的X项（“in1”重复5次，“in2”重复5次），实际上，它应该只有一个。y标记也是如此

图表似乎无法在两个轴上对相同的字段值进行分组，因此出现此问题

---

是否需要使用不同的数据结构，或者是否有图表设置来解决此问题？

我能够在气泡图中显示气泡，请查找下面的代码，这可能会给您一些想法。我已经评论了几行，您可以取消注释并查看结果，对于实际的结果，您需要在上面多做一些工作并理解GroupingCollection的概念。对于refrel链接：-

或者另一种实现您的目标的方法如下：-

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

希望这能帮助你

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