在Flex移动视图中显示3个饼图 - 附加测试用例和屏幕截图
我在一个非常简单的视图中为每个游戏用户显示3个饼图（源代码粘贴在下面）。
图表代表其他玩家的观点 - 如果显示的用户播放良好，合理，漂亮。
所以我使用3个URLLoaders从PHP脚本中获取JSON数据并将其放入3个ArrayCollections：_acGood，_acFair和_acNice
我的问题是布局 - 在纵向模式下，饼图的大小不同（可能取决于加载哪些数据）：
在横向模式中，它们不可读（太小）：
我的目的是显示所有饼图“全尺寸”和滚动条 - 可垂直（纵向模式）和水平（横向模式下）滚动。
这是我当前的测试代码 - 如果将这2个文件放入Flash Builder项目中，它将立即生效 -
Main.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" />
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>
1 个答案:
答案 0 :(得分：1)
如果将每个饼图放在具有设定宽度的容器中，则滚动条将变为活动状态。如果设置为100％，我的饼图将始终调整小调整以适应屏幕。
乙
P.S。关于饼图标签的上述评论也是正确的。可以选择将标签放在饼图内--PieSeries.labelPosition = inside
相关问题
- 捣蛋鬼 - 如何处理补间？附测试案例+截图
- 如何检测SpinnerList控件中间的单击？有测试用例和截图
- 如何最大化spark.components.Callout？附上截图
- 在Flex移动视图中显示3个饼图 - 附加测试用例和屏幕截图
- 在Spark列表中拖动在Flex移动应用程序中不起作用？附带测试用例和屏幕截图
- 为VSlider创建移动VSliderSkin - 包含测试用例和屏幕截图
- 使用带有Icon ItemRenderer的Multi DPI BitmapSource - 附带测试用例和屏幕截图
- 使用Flex绘制一块饼图 - 测试代码和附加截图
- 如何更改ButtonBar中的标签 - 简单的测试用例和附加的屏幕截图
- 使用静态单元格创建设置场景 - 附加截图和简单的测试用例
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？