actionscript-3 - 在 Flex 移动视图中显示 3 个饼图 - 附上测试用例和屏幕截图

Question

我在一个非常简单的视图中为每个游戏用户显示了 3 个饼图（源代码粘贴在下面）。

图表代表其他玩家的意见 - 如果显示的用户玩得好、公平、好。

因此，我使用 3 个 URLLoaders 从 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%，我的饼图将始终调整大小以适应屏幕。

乙

PS上面关于饼图标签的评论也是正确的。有一个选项可以将标签放在饼图中 - PieSeries.labelPosition = inside