0

Flexバブルチャートで次のデータを表現しようとしています。以下のチャートコードも参照してください。

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

そして、私が得るバブルチャートは私が期待するものではありません。私はバブルチャートを見て、半径が「カウント」であるバブルを示しています。XとYは、それぞれ業界と範囲で表されています。したがって、たとえば、チャートには、IndustryIn1とRange0-10Daysの交差点にあるradious10の円が表示されます。

実際には、次のグラフが表示されます

ここに画像の説明を入力してください

したがって、すべてのデータポイントに対して、新しいXアイテム（「in1」が5回繰り返され、「in2」が5回繰り返される）が作成されます。実際には、1つだけである必要があります。yマークの場合も同様です。

チャートは両方の軸で同じフィールド値をグループ化できないため、この問題が発生しているようです

別のデータ構造を採用する必要がありますか、それともこれを解決するチャート設定がありますか？

4

1 に答える 1

1

バブルチャートにバブルを表示することができます。以下のコードを見つけてください。コメントを外して結果を表示できる数行にコメントしました。実際の結果については、もう少し作業してGroupingCollectionの概念を理解する必要があります。refrelリンクの場合グループ化されたXMLデータをFlex円グラフで表示するにはどうすればよいですか？：-

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

これがお役に立てば幸いです。

于 2012-08-22T11:32:37.230 に答える