Question

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

我得到的泡泡图不是我的预期。我正在查看气泡图以显示半径为“count”的气泡，X和Y分别用Industry和Range表示。因此，例如，图表应在Industry In1和0-10天范围的交叉点显示一个十五的圆圈。

实际上，我得到以下图表

enter image description here

因此，对于每个数据点，它创建一个新的X项（“in1”重复5次，“in2”重复5次），实际上，它应该只有一个。与y标记的情况相同。

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

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

Answer 1

我可以在气泡图中显示气泡，请找下面的代码，这可能会给你一些想法。我已经评论了几行你可以取消注释并查看结果，为了你的实际结果，你必须对它进行更多的工作并理解GroupingCollection概念。对于refrel link How do I display grouped XML data in a Flex pie chart?： -

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

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

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

希望这可以帮助你......

Flex Bubblechart数据结构

1 个答案: