flex的一些图例

gispdr 2011-09-06

展开全文

Flex按时间段画动态曲线图，代码如下:

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">

<mx:Script>
<![CDATA[
import mx.charts.chartClasses.AxisLabelSet;
import mx.formatters.DateFormatter;
import mx.charts.chartClasses.IAxis;
import mx.collections.ArrayCollection;

[Bindable]
public var testDatas:ArrayCollection;

[Bindable]
private var maxDate:Date;
[Bindable]
private var minDate:Date;

private var timer:Timer;
private var dateFormat:DateFormatter = new DateFormatter();
private var dateVar:Date;

private function init():void {

dateFormat.formatString = "HH:NN:SS";
minDate = new Date();
var dx:Date = new Date();
dx.setMinutes(dx.getMinutes()+1, dx.getSeconds(), dx.getMilliseconds());
maxDate = dx;

dateVar = new Date();
testDatas = new ArrayCollection([{date: dateVar, valueTest: 101.71} ]);

timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, getDatas)
timer.start();

}

private function mylabel(labelValue:Object, previousValue:Object, d:IAxis):String {
var str:String = dateFormat.format(labelValue);
return str;
}

private function getDatas(et:Event):void {
var valueTestValue:int = Math.random()*50;
var dm:Date = new Date();
dm.setTime(dateVar.getTime());
dm.setSeconds(dm.getSeconds()+1, dm.getMilliseconds());
dateVar = dm;

if (dateVar.getTime()>maxDate.getTime()) {
maxDate = dateVar;
var dx:Date = new Date();
dx.setMinutes(dx.getMinutes()-1, dx.getSeconds(), dx.getMilliseconds());
minDate = dx;
}
testDatas.addItem({date: dateVar, valueTest: valueTestValue});

}

]]>
</mx:Script>

<mx:Panel title="DateTimeAxis Example" height="100%" width="100%">
<mx:LineChart id="mychart" height="100%" width="100%"
paddingRight="5" paddingLeft="5"
showDataTips="true" >

<mx:horizontalAxis>
<mx:DateTimeAxis dataUnits="seconds" interval="5" minimum="{minDate}" maximum="{maxDate}" labelFunction="mylabel" />
</mx:horizontalAxis>

<mx:verticalAxis>
<mx:LinearAxis baseAtZero="true" />
</mx:verticalAxis>

<mx:series>
<mx:LineSeries yField="valueTest" xField="date" displayName="TestData" dataProvider="{this.testDatas}"/>
</mx:series>
</mx:LineChart>
</mx:Panel>
</mx:Application>

flex使用后台返回xml生成饼状图

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.charts.chartClasses.AxisLabelSet;
import mx.formatters.DateFormatter;
import mx.charts.chartClasses.IAxis;
import mx.collections.ArrayCollection;

private function init():void {

dateFormat.formatString = "HH:NN:SS";
minDate = new Date();
var dx:Date = new Date();
dx.setMinutes(dx.getMinutes()+1, dx.getSeconds(), dx.getMilliseconds());
maxDate = dx;

dateVar = new Date();
testDatas = new ArrayCollection([{date: dateVar, valueTest: 101.71} ]);

timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, getDatas);
timer.start();

}

private function mylabel(labelValue:Object, previousValue:Object, d:IAxis):String {
var str:String = dateFormat.format(labelValue);
return str;
}

private function getDatas(et:Event):void {
var valueTestValue:int = Math.random()*50;
var dm:Date = new Date();

dm.setTime(dateVar.getTime());
dm.setSeconds(dm.getSeconds()+1, dm.getMilliseconds());
dateVar = dm;

if (dateVar.getTime()>maxDate.getTime()) {
maxDate = dateVar;
var dx:Date = new Date();
dx.setMinutes(dx.getMinutes()-1, dx.getSeconds(), dx.getMilliseconds());
minDate = dx;
}
testDatas.addItem({date: dateVar, valueTest: valueTestValue});
//Alert.show("list长度为: "+testDatas.length);
}

]]>
</mx:Script>

<mx:Panel title="DateTimeAxis Example" height="100%" width="100%">
<mx:LineChart id="mychart" height="100%" width="100%"
paddingRight="2" paddingLeft="3"
showDataTips="true" >

<mx:horizontalAxis>
<mx:DateTimeAxis dataUnits="seconds" interval="3" minimum="{minDate}" maximum="{maxDate}" labelFunction="mylabel" />
</mx:horizontalAxis>

<mx:verticalAxis>
<mx:LinearAxis baseAtZero="true" />
</mx:verticalAxis>

<mx:series>
<mx:LineSeries yField="valueTest" xField="date" displayName="TestData" dataProvider="{this.testDatas}"/>
</mx:series>
</mx:LineChart>
</mx:Panel>
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:esri="http://www./2008/ags" creationComplete="init();">

<mx:HTTPService url="http://localhost:8083/ashx/getdata.ashx" id="serviceid"
result="serviceResult(event);" fault="serviceFault(event)" showBusyCursor="true"
method="POST" resultFormat="e4x">//注意resultFormat
</mx:HTTPService>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.effects.easing.*;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;

[Bindable]
private var xmlResults:XML;
[Bindable]
private var arr:ArrayCollection;

private function init():void{
var params:Object={};
params["handle"]="pie";
serviceid.send(params);
}

//trace the result of the service out
private function serviceResult(event:ResultEvent):void {//注意事件类型
xmlResults = event.result as XML;
arr = new ArrayCollection();
// pieChartId.dataProvider=arr;
// Alert.show(xmlResults.toXMLString()+xmlResults.length());
// Alert.show(xmlResults.toXMLString()+xmlResults.children().length());
for each(var arrxml:XML in xmlResults.children()){
arr.addItem(arrxml);
}
// Alert.show(arr[0].TATOL);

}

// in the event that the service faults or times out
private function serviceFault(event:Event):void {
trace('broken service');
}

/* private function callService():void {

serviceid.send();
} */
]]>
</mx:Script>

<mx:Canvas>
<mx:PieChart id="pieChartId" dataProvider="{arr}" showDataTips="true">
<mx:series>
<mx:PieSeries field="TATOL" nameField="AREANAME" labelPosition="callout" displayName="AREANAME">
</mx:PieSeries>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{pieChartId}"/>
</mx:Canvas>

</mx:Application>

程序代码程序代码

<?xml version="1.0" encoding="UTF-8"?>
<data>
<result month="1 月">
<apple>81768</apple>
<orange>60310</orange>
<banana>43357</banana>
</result>
<result month="2 月">
<apple>81156</apple>
<orange>58883</orange>
<banana>59280</banana>
</result>
<result month="3 月">
<apple>72768</apple>
<orange>63031</orange>
<banana>41357</banana>
</result>
<result month="4 月">
<apple>85156</apple>
<orange>54883</orange>
<banana>47280</banana>
</result>
</data>

方法一: 用Model和source获取xml
程序代码程序代码

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Model id="results" source="price.xml"/>
<mx:Panel title=" 用Model和source获取xml">
<mx:LineChart id="myChart" dataProvider="{results.result}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries yField="banana" displayName="Banana"/>
<mx:LineSeries yField="apple" displayName="Apple"/>
<mx:LineSeries yField="orange" displayName="Orange"/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>

方法二:
将xml数据源转换成Array再作为图表的数据源
程序代码程序代码

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%">
<mx:Script>
import mx.utils.ArrayUtil;
</mx:Script>

<mx:Model id="results" source="price.xml"/>
<mx:ArrayCollection id="myAC"
source="{ArrayUtil.toArray(results.result)}"
/>

<mx:Panel title=" 将xml转换成Array形式的数据源">
<mx:LineChart id="myChart" dataProvider="{myAC}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries yField="banana" displayName="Banana"/>
<mx:LineSeries yField="apple" displayName="Apple"/>
<mx:LineSeries yField="orange" displayName="Orange"/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>

方法三: 用HTTPService来获取xml数据源
程序代码程序代码

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" creationComplete="srv.send()">
<mx:HTTPService id="srv" url="price.xml"/>

<mx:Panel title=" 用HTTPService来获取xml数据源">
<mx:LineChart id="myChart"
dataProvider="{srv.lastResult.data.result}"
showDataTips="true"
>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries yField="apple" displayName="Apple" name="Apple"/>
<mx:LineSeries yField="orange" displayName="Orange" name="Orange"/>
<mx:LineSeries yField="banana" displayName="Banana" name="Banana"/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>

方法四:将HTTPService 获取的数据源转换成ArrayCollection

注意: HTTPService需要 creationComplete="srv.send()"来获取数据源

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="srv.send()">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var myData:ArrayCollection;
]]></mx:Script>

<mx:HTTPService
id="srv"
url="price.xml"
useProxy="false"
result="myData=ArrayCollection(srv.lastResult.data.result)" />
<mx:Panel title="HttpService to ArrayCollection">
<mx:LineChart id="myChart" dataProvider="{myData}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries yField="apple" displayName="Apple" name="Apple"/>
<mx:LineSeries yField="orange" displayName="Orange" name="Orange"/>
<mx:LineSeries yField="banana" displayName="Banana" name="Banana"/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>

Flex：实时曲线图(定时获取后台数据)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var gprsAC:ArrayCollection = new ArrayCollection();

private static const MINISECENDS:int=1000;
private function initApp():void
{
setInterval(addArr,MINISECENDS);
}

private var i:Number = 1;
private var tmp_obj:Object;
private function addArr():void
{
tmp_obj = new Object();
var temp_count:Number = Math.ceil(Math.random()*100);
tmp_obj["time"]=i;
tmp_obj["count"]=temp_count;
gprsAC.addItem(tmp_obj);
i++;
if(i==24)
{
i = 1;
}
}
]]>
</mx:Script>

<mx:LineChart id="linchart" color="#333399" width="100%" height="100%" dataProvider="{gprsAC}"
showDataTips="true" fontSize="12" y="77" x="10">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="time"/>
</mx:horizontalAxis>
<mx:backgroundElements>
<mx:GridLines direction="horizontal">
<mx:horizontalStroke>
<mx:Stroke weight="1.5" color="#333399" alpha="0.2"/>
</mx:horizontalStroke>
</mx:GridLines>
</mx:backgroundElements>
<mx:series>
<mx:LineSeries id="lineserie" width="160" yField="count" />
</mx:series>
</mx:LineChart>
</mx:Application>

这里主要是通过setInterval(addArr,MINISECENDS);来实现一秒跳动一次的。当然还有setTime来做不过setTime做起来感觉很麻烦。
如果想通过后台交互的话那就改改addArr这个方法就行啦代码如下：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" creationComplete="init();">
<mx:Style>
.font12{font-family:宋体;fontSize:15}
</mx:Style>
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;

[Bindable]
private var expenses:ArrayCollection = new ArrayCollection();
private function init():void{
setInterval(torequest,2000);
}
public function torequest():void{
realtimeservice.send();
realtimeservice.addEventListener(ResultEvent.RESULT,getResult);
}

private var tmpobj:Object;
private function getResult(e:ResultEvent):void{
tmpobj = new Object();
tmpobj["Day"] =(String)(e.result.Day);
tmpobj["alpha"] =(String)(e.result.alpha);
tmpobj["beta"] =(String)(e.result.beta);
tmpobj["gama"] =(String)(e.result.gama);
if (expenses.length==20){
var i:int ;
for ( i= 1 ; i<20; i++){
expenses.setItemAt(expenses.getItemAt(i),i-1);
}
expenses.setItemAt(tmpobj,expenses.length-1);

}else{
expenses.addItem(tmpobj);
}

}

]]></mx:Script>

<mx:HTTPService id="realtimeservice" url="http://localhost:8080/flexcharttest/realtime.servlet" useProxy="false" method="POST">

</mx:HTTPService>
<mx:ApplicationControlBar dock="true" cornerRadius="14" fillAlphas="[1.0, 1.0]" fillColors="[#8BBED9, #FDFAFA]" themeColor="#74B2D9" >
<mx:Spacer width="100%" />
<mx:Legend dataProvider="{chart}"/>
</mx:ApplicationControlBar>
<mx:Panel title="曲线图" fontSize="15" width="100%" borderColor="#F7F2F2" themeColor="#F8FAFB" backgroundColor="#F9F5F5" borderStyle="inset">

<mx:LineChart dataProvider="{expenses}" showDataTips="true" width="100%" id="chart" fontFamily="宋体" fontSize="12">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Day" displayName="day" title="随机数" />
</mx:horizontalAxis>
<mx:series>

<mx:LineSeries yField="alpha" displayName="alpha浓度" styleName="font12" />
<mx:LineSeries yField="beta" displayName="beta" />
<mx:LineSeries yField="gama" displayName="gama" />

</mx:series>
</mx:LineChart>

</mx:Panel>

</mx:Application>

使用infoSymbol，用flex的饼图柱状图进行渲染

<esri:InfoSymbol id="PointSym" infoPlacement="center" containerStyleName="InfoSymbol">
<esri:infoRenderer>
<mx:Component>
<mx:VBox width="100%" height="100%" backgroundAlpha="0">
<mx:ieChart id="pieChart" dataProvider="{data}" width="90" height="90" showDataTips="true">
<mx:series>
<mx:ieSeries field="num" labelField="name" labelPosition="inside">
<mx:fills>
<mx:Array>
<mx:RadialGradient>
<mx:entries>
<mx:Array>
<mx:GradientEntry color="#FF0000" ratio="0"/>
</mx:Array>
</mx:entries>
</mx:RadialGradient>
<mx:RadialGradient>
<mx:entries>
<mx:Array>
<mx:GradientEntry color="#00ff00" ratio="0"/>
</mx:Array>
</mx:entries>
</mx:RadialGradient>
</mx:Array>
</mx:fills>
</mx:ieSeries>
</mx:series>
</mx:ieChart>
</mx:VBox>
</mx:Component>
</esri:infoRenderer>
</esri:InfoSymbol>

注：chart里面的{data}就是渲染的graphic的attribute

接下来的例子演示了Flex中如何将数据转化为图表的形式表示。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">

<mx:Script>
<![CDATA[
[Bindable]
[Embed(source='assets/money.png')]
private var MoneyIcon:Class;
]]>
</mx:Script>

<mx:XML id="quotesXML" source="adbe.xml" format="e4x" />
<mx:XMLListCollection id="adbe" source="{quotesXML.quote}" />

<mx:String id="ADBE_YAHOO">http://finance.yahoo.com/q?d=t&s=ADBE</mx:String>

<mx:ApplicationControlBar dock="true">
<mx:LinkButton icon="{MoneyIcon}"
label="ADBE"
click="navigateToURL(new URLRequest(ADBE_YAHOO))"
fontSize="14"
fontWeight="bold" />
</mx:ApplicationControlBar>

<mx:VBox backgroundColor="white" width="100%" height="100%">
<mx:HLOCChart id="hlocChart"
showDataTips="true"
dataProvider="{adbe}"
width="100%"
height="100%">


<mx:verticalAxis>
<mx:LinearAxis baseAtZero="false" />
</mx:verticalAxis>


<mx:horizontalAxis>
<mx:CategoryAxis categoryField="@date" title="Date"/>
</mx:horizontalAxis>


<mx:series>
<mx:HLOCSeries id="series1"
highField="@high"
lowField="@low"
openField="@open"
closeField="@close"/>
</mx:series>
</mx:HLOCChart>
</mx:VBox>

</mx:Application>

]

++++++++++++++++++
FLEX 解析XML的方式
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();loaderxml();" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:HTTPService id="parseXml" showBusyCursor="true" url="brow.xml">

</mx:HTTPService>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
private var arr:ArrayCollection
private function init(){
parseXml.send();
parseXml.addEventListener(ResultEvent.RESULT,result);
parseXml.addEventListener(FaultEvent.FAULT,fault);
}

private function fault(event:FaultEvent){
trace(event.message)
}
private function result(event:ResultEvent){
trace("result:"+event.result.brows.brow as ArrayCollection);//输出null;单下边
arr=event.result.brows.brow //这可以转成ArrayCollecation
trace(arr.getItemAt(0).sp.toString());//输出kang
trace("label:"+arr.getItemAt(0).label.toString());//输出""

trace(parseXml.lastResult.brows.brow[0].sp);//输出kang
trace(parseXml.lastResult.brows.brow[1].icon)//输出 img/Face/1.swf
}
private function loaderxml(){
var url="brow.xml";
var ul:URLLoader=new URLLoader();
ul.load(new URLRequest(url));
ul.addEventListener(Event.COMPLETE,areadyLoad);
}
private function areadyLoad(event:Event){
var xml:XML=XML(event.target.data);
trace(xml.brow[0].sp);//输出kang
trace(xml.brow[1].@data);//输出1

var obj1:Object="<sp>hello</sp>";
var obj2:Object="<ss>sdfasf</ss>"
xml.appendChild(obj1);
trace(xml.toXMLString());//最后加了一句<sp>hello</sp>
}
]]>
</mx:Script>
</mx:Application>
一起的

<?xml version="1.0" encoding="UTF-8"?>
<brows>
<brow data="0" tp="微笑" label="" icon="img/Face/0.swf">
<sp>kang</sp>
</brow>
<brow data="1" tp="撇嘴" label="a" icon="img/Face/1.swf"/>
<brow data="2" tp="撇嘴" label="b" icon="img/Face/2.swf"/>
<brow data="3" tp="撇嘴" label="c" icon="img/Face/3.swf"/>
<brow data="4" tp="撇嘴" label="d" icon="img/Face/4.swf"/>
<brow data="5" tp="撇嘴" label="e" icon="img/Face/5.swf"/>
<brows>

------------------------------

去年年底的时候，所做的一个rails项目涉及到图表功能，主要有显示投票结果（柱状图）、网上办事统计结果（饼状图）、已办事件按月统计结果（线状图）……，当时可真是一件很麻烦的事情，开始准备搬flex来做，结果考虑到开发成本等等原因没采用，后来是自己写js，做了好一段时间，结果在跨平台上效果却不是很理想。当时真是苦煞我也，心想要是请几个专职的google专家来帮我做成和google一样的效果多好啊，巧合的是Google于去年晚些时候悄然推出了新图表API。Google图表最初是作为视频和财经服务的一项中间项目，后来Google决定将其公诸于世。Google始终如一地向大家提供如此优雅和高效的解决方案来处理通用问题，当然Google图表也不例外。

那么是Google图表是如何为我们服务的呢？主要通过简单地发送一条URL来生成图表，调用者的主要工作是构建这些URL，该URL最主要有以下三个参数：图表的类型、图表的大小和图表的数据。图表的类型由“cht”参数指定。图表大小用chs指定，包括图表的长和宽，用整数来表示。图表数据用chd表示，Google提供了四种不同的数据编码方式，最简单的就是文本编码。通过给数据添加“t:”前缀。比如 http://chart.apis.google.com/chart?cht=lc&chs=100x50&chd=t:25,75,50 就是一条完整的图表服务路径，更完整的图表API可以参考 http://code.google.com/apis/chart/。

那么接下来我们就是去构建这些URL，这里仍存在2个问题：

1 构建这样的URL需要大量的字符串拼接操作，较为繁琐，对于比较数据量比较大的图表，构建这样的URL就很麻烦。

2 构建这样的URL其实很多地方是重复的，只是少数的参数不一样，对于有大量图表显示的系统来说要做很多重复性的工作。

幸运的是，我们不必重复发明轮子了，DEEpak Jois已经封装了该API，他的gem叫做gchartrb，提供一个整洁简明的方式来生成图表URL。使用该gem的第一步是安装它：gem install gchartrb。使用起来超乎想象的简单，效果也非常的炫，不信？看看我做的一些demo吧：）

场景一 venn图例如：A有500个元素，B有400个元素，C有300个元素，AB交集为200，AC交集为100， BC交集为50通过以上的数据得到代表变量A,B,C的三个圆圈，圆圈的面积代表变量所含元素个数，圆圈的交集代表变量之间的交集。

Java代码
require 'rubygems'
require 'google_chart'
def venn_diagram
GoogleChart::VennDiagram.new("400x400", 'Venn Diagram') do |vd|
vd.data "Blue", 500,'0000ff'
vd.data "Green", 400, '00ff00'
vd.data "Red", 300, 'ff0000'
vd.intersections 200, 100, 50
@chart = vd.to_url
end
end

require 'rubygems'
require 'google_chart'
def venn_diagram
GoogleChart::VennDiagram.new("400x400", 'Venn Diagram') do |vd|
vd.data "Blue", 500,'0000ff'
vd.data "Green", 400, '00ff00'
vd.data "Red", 300, 'ff0000'
vd.intersections 200, 100, 50
@chart = vd.to_url
end
endJava代码
<%= image_tag @chart %>

<%= image_tag @chart %>

场景二柱状图例如JE会员分布图，beijing 20000人， shanghai 18000人，tianjin 10000人，nanjing 8000 ，guangzhou 14000，shenzhen 16000

Ruby代码
def bar_chart
GoogleChart::BarChart.new('800x200', "Bar Chart", :vertical, false) do |bc|
bc.data "beijing", [20000], '0000ff'
bc.data "shanghai", [18000], 'ff0000'
bc.data "tianjin", [10000], '00ff00'
bc.data "nanjing", [8000], '00aaff'
bc.data "guangzhou", [16000], '0effee'
bc.data "shenzhen", [14000], 'eeff00'
@chart = bc.to_url
end
end

def bar_chart
GoogleChart::BarChart.new('800x200', "Bar Chart", :vertical, false) do |bc|
bc.data "beijing", [20000], '0000ff'
bc.data "shanghai", [18000], 'ff0000'
bc.data "tianjin", [10000], '00ff00'
bc.data "nanjing", [8000], '00aaff'
bc.data "guangzhou", [16000], '0effee'
bc.data "shenzhen", [14000], 'eeff00'
@chart = bc.to_url
end
endRuby代码
<%= image_tag @chart %>

<%= image_tag @chart %>

场景三饼状图例如JE文章投票人数统计，very good 200票， good 150票，just so so100票，bad 180票

Ruby代码
def pie_chart
GoogleChart::PieChart.new('320x200', "Pie Chart",false) do |pc|
pc.data "very good", 300
pc.data "good", 200
pc.data "just so so", 100
pc.data "bad", 180
pc.show_labels = true
@chart = pc.to_url
end
end

def pie_chart
GoogleChart::PieChart.new('320x200', "Pie Chart",false) do |pc|
pc.data "very good", 300
pc.data "good", 200
pc.data "just so so", 100
pc.data "bad", 180
pc.show_labels = true
@chart = pc.to_url
end
endRuby代码
<%= image_tag @chart %>

<%= image_tag @chart %>

场景四折线图例如统计每周JE会员增加数量，一周的数量分别是 56 48 68 59 66 67 59

Ruby代码
GoogleChart::LineChart.new('320x200', "Line XY Chart", true) do |lcxy|
lcxy.data "amount", [[1,56], [2,48], [3,68], [4,59], [5,66], [6,67], [7,59]], '0000ff'
@chart = lcxy.to_url
end

GoogleChart::LineChart.new('320x200', "Line XY Chart", true) do |lcxy|
lcxy.data "amount", [[1,56], [2,48], [3,68], [4,59], [5,66], [6,67], [7,59]], '0000ff'
@chart = lcxy.to_url
endRuby代码
<%= image_tag @chart %>

<%= image_tag @chart %>

这里我分三步描述flash读XML的基本方法，以及外延一个对带命名空间的XML的读取方法，如下目录：

1、加载XML文件；
2、读取XML的数据；
3、过滤数据；
4、读取带命名空间的XML数据；
5、处理gb2312编码的XML；

注：在这里的AS脚本都是在 Adobe Flash CS3 版本以上中进行编写，flex用户请自行添加修改相应的包引用。

下面开始第一部分，如何加载XML文件！

1、加载XML文件
在脚本编辑器中写入以下代码：

var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = null;

xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.load(new URLRequest("http://www./net/files/sampleXML.xml"));

function LoadXML(e:Event):void {
xmlData = new XML(e.target.data);
trace(xmlData);
}按Ctrl+Enter运行它，你会在输出窗口中看到整个XML的内容：

这里不进行代码解说，关于XML类，请查看：http://help.adobe.com/zh_TW/AS3LCR/Flash_10.0/XML.html

下面进入第2部分：如何读取XML数据。

2、读取XML数据
2.1直接读取XML数据
对XML数据的读取是十分简单的，不信请看：

function LoadXML(e:Event):void {
xmlData = new XML(e.target.data);
ParseBooks(xmlData);
}

function ParseBooks(bookInput:XML):void {
trace("XML Output");
trace("------------------------");
trace(bookInput.Book);
}可得到如何结果：

XML Output
------------------------

Sir Arthur Conan Doyle

F. Scott Fitzgerald

Stephen E. Ambrose

Stephen E. Ambrose

2.2、XML和XMLList
这里我们会用到另外一个类XMLList，这个类可以把XML对象作为数组的方式读取，可以方便地进行for each操作。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">

<mx:VDividedBox x="0" y="0" height="100%" width="100%">
<mx:Legend dataProvider="{linechart}" height="40%" width="100%"/>
<mx:HDividedBox x="0" y="0" height="100%" width="100%">
<mx:LineChart id="linechart" showDataTips="true" x="0" y="0" height="100%" width="80%" dataProvider="{capbility}" >
<mx:horizontalAxis>
<mx:CategoryAxis categoryField = "Time" labelFunction="showHour"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries displayName="Series 1" yField=""/>
</mx:series>
</mx:LineChart>
<mx:Canvas width="20%" height="100%" id = "can">
</mx:Canvas>
</mx:HDividedBox>
</mx:VDividedBox>
<mx:Script>
<![CDATA[
import mx.graphics.Stroke;
import mx.events.DragEvent;
import mx.controls.CheckBox;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
import mx.charts.chartClasses.Series;

private var t:Timer = new Timer(2000);
private var capItem:Array = new Array();
private var theName:Array = ["股票1","股票2","股票3"];
private var i:int=1;
private var ii:int = 15;
private var step:int = 10;
[Bindable]
private var capbility:ArrayCollection = new ArrayCollection( [
{ Time: "10:00", 股票1: 2000, 股票2: 1500, 股票3: 450},
{ Time: "10:15", 股票1: 1000, 股票2: 200, 股票3: 600},
{ Time: "10:30", 股票1: 1500, 股票2: 500, 股票3: 300},
{ Time: "10:45", 股票1: 1800, 股票2: 1200, 股票3: 900},
{ Time: "11:00", 股票1: 2400, 股票2: 575, 股票3: 500},
{ Time: "11:15", 股票1: 2000, 股票2: 1500, 股票3: 450},
{ Time: "11:30", 股票1: 1000, 股票2: 200, 股票3: 600},
{ Time: "11:45", 股票1: 1500, 股票2: 500, 股票3: 300},
{ Time: "12:00", 股票1: 1800, 股票2: 1200, 股票3: 900},
{ Time: "12:15", 股票1: 2400, 股票2: 575, 股票3: 500},
{ Time: "12:30", 股票1: 2000, 股票2: 1500, 股票3: 450},
{ Time: "12:45", 股票1: 1000, 股票2: 200, 股票3: 600},
{ Time: "13:00", 股票1: 1500, 股票2: 500, 股票3: 300},
{ Time: "13:15", 股票1: 1800, 股票2: 1200, 股票3: 900},
{ Time: "13:30", 股票1: 2400, 股票2: 575, 股票3: 500},
{ Time: "13:45", 股票1: 1000, 股票2: 200, 股票3: 600},
{ Time: "14:00", 股票1: 1500, 股票2: 500, 股票3: 300},
{ Time: "14:15", 股票1: 1800, 股票2: 1200, 股票3: 900},
{ Time: "14:30", 股票1: 2400, 股票2: 575, 股票3: 500},
{ Time: "14:45", 股票1: 1000, 股票2: 200, 股票3: 600},
{ Time: "15:00", 股票1: 1500, 股票2: 500, 股票3: 300}]);

private function init():void{
for(var i:int = 0;i<theName.length;i++){
linechart.series = null;
var cb:CheckBox = new CheckBox();
var CBmodel:CheckboxModel = new CheckboxModel;
cb.label = theName[i];
cb.x = 10 ;
cb.y = can.y + (i+1)*20;
CBmodel.setName(theName[i]);
CBmodel.setId(i);
cb.data = CBmodel;
cb.addEventListener(MouseEvent.CLICK,selectThis);
can.addChild(cb);
timeBegin();//开始定时
}
}
private function selectThis(e:MouseEvent):void{
var lineSeries:Array = linechart.series;
var tempSeries:LineSeries = new LineSeries();
if(e.target.data.getSelected()==0){
e.target.data.setSelected(1);
tempSeries.yField = e.target.data.getName();
tempSeries.displayName = e.target.data.getName();
tempSeries.setStyle("form", "curve");
lineSeries.push(tempSeries);
linechart.series = lineSeries;
}else{
for(var i:int=0;i<lineSeries.length;i++){
if(e.target.data.getName() == lineSeries[i].yField){
lineSeries.splice(i,1);
}
linechart.series = lineSeries;
}
e.target.data.setSelected(0);
}
}
private function showHour(cat:Object,pcat:Object,ax:CategoryAxis,labelItem:Object):String{
var re:String = "";
var theTime:String = labelItem.Time;
var x:Array = theTime.split(":");
if(x[1] == "00"){
re = x[0];
}else re = "";
return re;
}
public function timeBegin():void{
t.start();
t.addEventListener(TimerEvent.TIMER,doTime);
}
private function doTime(e:Event):void{
var time1:String;
var time2:String = new String((i%4)*15);
var x1:int;
var x2:int;
var x3:int;
i++;
if(time2 == "0")time2 = "00";
if(time2=="00"){
ii = ii+1;
time1 =new String(((ii)%24));
}else time1 =new String( ii%24 );
x1 = step*100/10;
x2 = step*80/10;
x3 = x1+x2;
step++;
var add:Array = [{Time:time1+":"+time2,股票1:x1,股票2:x2,股票3:x3}];
this.capbility.removeItemAt(0);
capbility.addItem(add[0]);
}
]]>
</mx:Script>
</mx:Application>

Flex 快捷键对一般开发者来说都非常有用，本文向大家简单介绍一下Flex 快捷键有哪些，以及它们的具体作用，希望本文的介绍能让你有所收获。

◆常用Flex 快捷键如下：

Ctrl-F11: 执行（Run）
F11: 除错（Debug）
Ctrl-Alt-Down: 重复目前所在编辑列（Repeat current line ）
Alt-Up: 移动本列，或选择列往上移动（Move line (or selection) up ）
Alt-Down: 移动本列，或选择列下往移动（Move line (or selection) down ）
Ctrl-Click: 移至定义区（Go to definition (=F3) ）

F3 显示当前选中标签的类定义
Ctrl-D: 删除本行（Delete line ）
Alt-/: 文字自动完成（Word completion (cycles through possible matches)）
Ctrl-Up: 捲轴向上（Scroll up ）
Ctrl-Down: 捲轴向下（Scroll Down ）
Shift+F2 弹出帮助窗体，显示选中标签的上下文帮助
F1 在IDE内显示上下文帮助
CTRL+0 在代码视窗显示大纲
CTRL+SHIFT+C 加注释
Ctrl+/：行注释
Ctrl+Shift+L：所有快捷键提示

◆另外还有一些不怎么常用的Flex 快捷键。

1.) 打开类型 (Ctrl-Shift-T)* - 浏览工程中所有类型(AS 类/接口, MXML文件) ，可快速打开它们。

2.) 跳到定义处(F3/Ctrl-点击目标)* - 快速跳转到 (类型/变量/函数)定义处。

3.) 快速Outliner视图 (Ctrl-O)* - 以弹出窗口方式打开outline视图。

4.) 内容相关帮助 (在目标上按F1) - 在MXML标签，函数或类/接口上按F1会在帮助面板上显示相关帮助信息。

5.) 打开内容相关帮助 (Shift-F2) - 会弹出新窗口显示相关帮助信息。

6.) 跳到匹配的括号(Ctrl-Shift+P)* - 跳到相对应得括号处。

7.) 悬停在目标上 - 当你把鼠标停留在变量上，会显示变量类型，如果停留在函数上，则显示返回类型。

8.) 添加CDATA 块(Ctrl-Shift-C) -

9.) 事件类型提示(Ctrl-space) - addEventListener( 显示所有相关联的事件)

10.) 组织导入(Ctrl + Shift + O)*

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection( [
{ Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
{ Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
{ Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
{ Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
{ Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
//定义数据源：Month表示数据个数，名字可以随便定义
]]>
</mx:Script>
<mx:Style>
BubbleChart { color:#000099; }、、定义气泡的样式
</mx:Style>
<mx:Panel title="ColumnChart and BarChart Controls Example"
height="100%" width="100%" layout="horizontal">
<mx:BubbleChart id="JBubber" showDataTips="true" dataProvider="{expensesAC}" width="635">

//showDataTips表示是否显示每一个气泡的详细信息
<mx:series>
<mx:BubbleSeries displayName="Profix/Expenses/Amount" yField="Expenses" radiusField="Amount" xField="Profit"/>

//displayName表示显示详细信息的标题，xField表示显示的第一行数据，yField表示显示的第2行数据，radiusField表示气泡的大小
</mx:series>
</mx:BubbleChart>
<mx:Legend dataProvider="{JBubber}"/>

</mx:Panel>
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.XMLListCollection;
import mx.controls.Alert;

[Bindable]//绑定数据源
private var linechartArray:ArrayCollection = new ArrayCollection([
{name:"1",value:300},
{name:"2",value:500},
{name:"3",value:300},
{name:"4",value:200},
{name:"5",value:800},
{name:"6",value:100},
{name:"7",value:800},
{name:"8",value:700},
{name:"9",value:200}

]);

public function init():void{
//对数据源添加第一项和最后一项以达到不覆盖的效果
var foo:Object=new Object;
this.linechartArray.addItemAt(foo,0);
this.linechartArray.addItem(foo);
}
//隐藏竖轴label
private function verticalHide(data:Object, field:String, index:Number):String {
return "";
}

]]>
</mx:Script>


<mx:SolidColor id="sc1" color="blue" alpha=".3"/>
<mx:SolidColor id="sc2" color="red" alpha=".3"/>
<mx:SolidColor id="sc3" color="green" alpha=".3"/>

<mx:Stroke id = "s1" color="blue" weight="2"/>
<mx:Stroke id = "s2" color="red" weight="2"/>
<mx:Stroke id = "s3" color="green" weight="2"/>
<mx:Stroke id="axisStroke" color="#884422" weight="8" alpha=".88" caps="square"/>


<mx:LineChart id="linechart" height="312" width="889" paddingLeft="5" paddingRight="5"
showDataTips="true" dataProvider="{linechartArray}">

<mx:backgroundElements>
<mx:GridLines direction="vertical" horizontalChangeCount="2"
verticalChangeCount="1"
/>
</mx:backgroundElements>


<mx:horizontalAxisRenderers>
<mx:AxisRenderer labelGap="3" textIndent="0" id="myAxisRenderer" placement="bottom" canDropLabels="true" axis="{a1}">

<mx:axisStroke>
<mx:Stroke color="red" weight="4" caps="round"/>
</mx:axisStroke>


</mx:AxisRenderer>
</mx:horizontalAxisRenderers>


<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{a2}" labelGap="3" alpha="0" placement="left"
showLine="true">
</mx:AxisRenderer>
</mx:verticalAxisRenderers>


<mx:verticalAxis>
<mx:LinearAxis id="a2" labelFunction="verticalHide"
minimum="0" interval="10">
</mx:LinearAxis>
</mx:verticalAxis>


<mx:horizontalAxis >
<mx:CategoryAxis id="a1" categoryField="name" ticksBetweenLabels="false"/>
</mx:horizontalAxis>


<!-- <mx:secondSeries>

<mx:LineSeries form="curve" xField="name" yField="value"/>
</mx:secondSeries>-->
<mx:series>
<mx:LineSeries yField="value" form="curve" displayName="value" lineStroke="{s3}"/>
</mx:series>
</mx:LineChart>
</mx:Application>