actionscript-3 - Flex モバイル ビューに 3 つの円グラフを表示 - テスト ケースとスクリーンショットを添付

Question

非常に単純なビューで、ゲームのすべてのユーザーに対して 3 つの円グラフを表示します (ソース コードは以下に貼り付けられます)。

チャートは、他のプレイヤーの意見を表しています。

そこで、3 つの URLLoader を使用して PHP スクリプトから JSON データをフェッチし、それを 3 つの ArrayCollections:_acGoodに配置_acFairします。_acNice

私の問題はレイアウトです-縦向きモードでは、円グラフのサイズが異なります（おそらくどのデータが読み込まれるかによって異なります）：

また、ランドスケープ モードでは判読できません (小さすぎます)。

私の意図は、実際にはすべての円グラフを「フルサイズ」でスクローラーに表示することです-垂直方向（縦向きモードの場合）および水平方向（横向きモードの場合）にスクロールできます。

これが私の現在のテスト コードです。これら 2 つのファイルを Flash Builder プロジェクトに配置すると、すぐに動作します。

メイン.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    firstView="views.Home" />

ホーム.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        viewActivate="startLoading(event)"
        title="Display 3 pie charts">

    <fx:Declarations>
        <s:ArrayCollection id="_acGood" />
        <s:ArrayCollection id="_acFair" />
        <s:ArrayCollection id="_acNice" />
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import spark.events.ViewNavigatorEvent;

            private static const PLAYER_ID:String = 'DE11198';

            private static const STATS_GOOD:String = 'http://preferans.de/rep-json.php?title=good&id=';
            private static const STATS_FAIR:String = 'http://preferans.de/rep-json.php?title=fair&id=';
            private static const STATS_NICE:String = 'http://preferans.de/rep-json.php?title=nice&id=';

            private var _urlLoaderGood:URLLoader = new URLLoader();
            private var _urlLoaderFair:URLLoader = new URLLoader();
            private var _urlLoaderNice:URLLoader = new URLLoader();

            private function startLoading(event:ViewNavigatorEvent):void {
                _urlLoaderGood.addEventListener(Event.COMPLETE, handleCompleteGood);
                _urlLoaderFair.addEventListener(Event.COMPLETE, handleCompleteFair);
                _urlLoaderNice.addEventListener(Event.COMPLETE, handleCompleteNice);

                _urlLoaderGood.load(new URLRequest(STATS_GOOD + PLAYER_ID));
                _urlLoaderFair.load(new URLRequest(STATS_FAIR + PLAYER_ID));
                _urlLoaderNice.load(new URLRequest(STATS_NICE + PLAYER_ID));
            }

            private function handleCompleteGood(event:Event):void {
                var loader:URLLoader = URLLoader(event.target);
                var obj:Object = JSON.parse(loader.data);

                _acGood.removeAll();
                for each (var row:Object in obj.rows) {
                    _acGood.addItem({ label: 'Играет ' + row.c[0].v, data: row.c[1].v });
                }
            }

            private function handleCompleteFair(event:Event):void {
                var loader:URLLoader = URLLoader(event.target);
                var obj:Object = JSON.parse(loader.data);
                _acFair.removeAll();
                for each (var row:Object in obj.rows) {
                    _acFair.addItem({ label: 'Играет ' + row.c[0].v, data: row.c[1].v });
                }
            }

            private function handleCompleteNice(event:Event):void {
                var loader:URLLoader = URLLoader(event.target);
                var obj:Object = JSON.parse(loader.data);
                _acNice.removeAll();
                for each (var row:Object in obj.rows) {
                    _acNice.addItem({ label: 'Общаться ' + row.c[0].v, data: row.c[1].v });
                }
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="portrait"/>
        <s:State name="landscape"/>
    </s:states> 

    <s:layout.portrait>
        <s:VerticalLayout horizontalAlign="center" />
    </s:layout.portrait>
    <s:layout.landscape>
        <s:HorizontalLayout verticalAlign="middle" />
    </s:layout.landscape>

    <mx:PieChart id="_good" 
                 height="100%" 
                 width="100%"
                 dataProvider="{_acGood}" >

        <mx:series>
            <mx:PieSeries labelPosition="callout" labelField="label" field="data">
                <mx:fills>
                    <mx:SolidColor color="0x66CC66" />
                    <mx:SolidColor color="0xCC0000" />
                </mx:fills>             
            </mx:PieSeries>
        </mx:series>
    </mx:PieChart>

    <mx:PieChart id="_fair" 
                 height="100%" 
                 width="100%"
                 dataProvider="{_acFair}" >

        <mx:series>
            <mx:PieSeries labelPosition="callout" labelField="label" field="data">
                <mx:fills>
                    <mx:SolidColor color="0x66CC66" />
                    <mx:SolidColor color="0xCC0000" />
                </mx:fills>             
            </mx:PieSeries>
        </mx:series>
    </mx:PieChart>  

    <mx:PieChart id="_nice" 
                 height="100%" 
                 width="100%"
                 dataProvider="{_acNice}" >

        <mx:series>
            <mx:PieSeries labelPosition="callout" labelField="label" field="data">
                <mx:fills>
                    <mx:SolidColor color="0x66CC66" />
                    <mx:SolidColor color="0xCC0000" />
                </mx:fills>             
            </mx:PieSeries>
        </mx:series>
    </mx:PieChart>  

</s:View>

アップデート：

Scrollerを使用した私の新しいコードには、まだ同じユーザビリティの問題があります (ラベルが読めない、不均一なサイズのパイ):

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        viewActivate="startLoading(event)"
        title="Display 3 pie charts">

    <fx:Declarations>
        <s:ArrayCollection id="_acGood" />
        <s:ArrayCollection id="_acFair" />
        <s:ArrayCollection id="_acNice" />
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import spark.events.ViewNavigatorEvent;

            private static const PLAYER_ID:String = 'DE11198';

            private static const STATS_GOOD:String = 'http://preferans.de/rep-json.php?title=good&id=';
            private static const STATS_FAIR:String = 'http://preferans.de/rep-json.php?title=fair&id=';
            private static const STATS_NICE:String = 'http://preferans.de/rep-json.php?title=nice&id=';

            private var _urlLoaderGood:URLLoader = new URLLoader();
            private var _urlLoaderFair:URLLoader = new URLLoader();
            private var _urlLoaderNice:URLLoader = new URLLoader();

            private function startLoading(event:ViewNavigatorEvent):void {
                _urlLoaderGood.addEventListener(Event.COMPLETE, handleCompleteGood);
                _urlLoaderFair.addEventListener(Event.COMPLETE, handleCompleteFair);
                _urlLoaderNice.addEventListener(Event.COMPLETE, handleCompleteNice);

                _urlLoaderGood.load(new URLRequest(STATS_GOOD + PLAYER_ID));
                _urlLoaderFair.load(new URLRequest(STATS_FAIR + PLAYER_ID));
                _urlLoaderNice.load(new URLRequest(STATS_NICE + PLAYER_ID));
            }

            private function handleCompleteGood(event:Event):void {
                var loader:URLLoader = URLLoader(event.target);
                var obj:Object = JSON.parse(loader.data);

                _acGood.removeAll();
                for each (var row:Object in obj.rows) {
                    _acGood.addItem({ label: 'Играет ' + row.c[0].v, data: row.c[1].v });
                }
            }

            private function handleCompleteFair(event:Event):void {
                var loader:URLLoader = URLLoader(event.target);
                var obj:Object = JSON.parse(loader.data);
                _acFair.removeAll();
                for each (var row:Object in obj.rows) {
                    _acFair.addItem({ label: 'Играет ' + row.c[0].v, data: row.c[1].v });
                }
            }

            private function handleCompleteNice(event:Event):void {
                var loader:URLLoader = URLLoader(event.target);
                var obj:Object = JSON.parse(loader.data);
                _acNice.removeAll();
                for each (var row:Object in obj.rows) {
                    _acNice.addItem({ label: 'Общаться ' + row.c[0].v, data: row.c[1].v });
                }
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="portrait"/>
        <s:State name="landscape"/>
    </s:states> 

    <s:Scroller 
        width="100%" 
        height="100%"
        verticalScrollPolicy.portrait="on"
        horizontalScrollPolicy.landscape="on">

        <s:Group width="100%" height="100%">

            <s:layout.portrait>
                <s:VerticalLayout />
            </s:layout.portrait>
            <s:layout.landscape>
                <s:HorizontalLayout />
            </s:layout.landscape>

            <mx:PieChart id="_good" 
                         width.portrait="100%"
                         height.landscape="100%"
                         paddingRight="8" 
                         paddingLeft="8" 
                         dataProvider="{_acGood}" >

                <mx:series>
                    <mx:PieSeries labelPosition="callout" labelField="label" field="data">
                        <mx:fills>
                            <mx:SolidColor color="0x66CC66" />
                            <mx:SolidColor color="0xCC0000" />
                        </mx:fills>             
                    </mx:PieSeries>
                </mx:series>
            </mx:PieChart>

            <mx:PieChart id="_fair" 
                         width.portrait="100%"
                         height.landscape="100%"
                         paddingRight="8" 
                         paddingLeft="8" 
                         dataProvider="{_acFair}" >

                <mx:series>
                    <mx:PieSeries labelPosition="callout" labelField="label" field="data">
                        <mx:fills>
                            <mx:SolidColor color="0x66CC66" />
                            <mx:SolidColor color="0xCC0000" />
                        </mx:fills>             
                    </mx:PieSeries>
                </mx:series>
            </mx:PieChart>  

            <mx:PieChart id="_nice" 
                         width.portrait="100%"
                         height.landscape="100%"
                         paddingRight="8" 
                         paddingLeft="8" 
                         dataProvider="{_acNice}" >

                <mx:series>
                    <mx:PieSeries labelPosition="callout" labelField="label" field="data">
                        <mx:fills>
                            <mx:SolidColor color="0x66CC66" />
                            <mx:SolidColor color="0xCC0000" />
                        </mx:fills>             
                    </mx:PieSeries>
                </mx:series>
            </mx:PieChart>

        </s:Group>
    </s:Scroller>
</s:View>

Answer 1

設定された幅のコンテナー内に各円グラフを配置すると、スクローラーがアクティブになります。100% に設定すると、円グラフは画面に合わせて常に小さくサイズ変更されます。

B

PS 円グラフのラベルに関する上記のコメントも正しいです。円グラフ内にラベルを配置するオプションがあります - PieSeries.labelPosition = inside