flex的一些圖例

gispdr 2011-09-06

展開全文

Flex按時間段畫動態(tài)曲線圖，代碼如下:

<?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數(shù)據(jù)源轉(zhuǎn)換成Array再作為圖表的數(shù)據(jù)源
程序代碼程序代碼

<?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轉(zhuǎn)換成Array形式的數(shù)據(jù)源">
<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數(shù)據(jù)源
程序代碼程序代碼

<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數(shù)據(jù)源">
<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 獲取的數(shù)據(jù)源轉(zhuǎn)換成ArrayCollection

注意: HTTPService需要 creationComplete="srv.send()"來獲取數(shù)據(jù)源

<?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：實時曲線圖(定時獲取后臺數(shù)據(jù))

<?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);來實現(xiàn)一秒跳動一次的。當(dāng)然還有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="隨機數(shù)" />
</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中如何將數(shù)據(jù)轉(zhuǎn)化為圖表的形式表示。

<?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 //這可以轉(zhuǎn)成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項目涉及到圖表功能，主要有顯示投票結(jié)果（柱狀圖）、網(wǎng)上辦事統(tǒng)計結(jié)果（餅狀圖）、已辦事件按月統(tǒng)計結(jié)果（線狀圖）……，當(dāng)時可真是一件很麻煩的事情，開始準(zhǔn)備搬flex來做，結(jié)果考慮到開發(fā)成本等等原因沒采用，后來是自己寫js，做了好一段時間，結(jié)果在跨平臺上效果卻不是很理想。當(dāng)時真是苦煞我也，心想要是請幾個專職的google專家來幫我做成和google一樣的效果多好啊，巧合的是Google于去年晚些時候悄然推出了新圖表API。Google圖表最初是作為視頻和財經(jīng)服務(wù)的一項中間項目，后來Google決定將其公諸于世。Google始終如一地向大家提供如此優(yōu)雅和高效的解決方案來處理通用問題，當(dāng)然Google圖表也不例外。

那么是Google圖表是如何為我們服務(wù)的呢？主要通過簡單地發(fā)送一條URL來生成圖表，調(diào)用者的主要工作是構(gòu)建這些URL，該URL最主要有以下三個參數(shù)：圖表的類型、圖表的大小和圖表的數(shù)據(jù)。圖表的類型由“cht”參數(shù)指定。圖表大小用chs指定，包括圖表的長和寬，用整數(shù)來表示。圖表數(shù)據(jù)用chd表示，Google提供了四種不同的數(shù)據(jù)編碼方式，最簡單的就是文本編碼。通過給數(shù)據(jù)添加“t:”前綴。比如 http://chart.apis.google.com/chart?cht=lc&chs=100x50&chd=t:25,75,50 就是一條完整的圖表服務(wù)路徑，更完整的圖表API可以參考 http://code.google.com/apis/chart/。

那么接下來我們就是去構(gòu)建這些URL，這里仍存在2個問題：

1 構(gòu)建這樣的URL需要大量的字符串拼接操作，較為繁瑣，對于比較數(shù)據(jù)量比較大的圖表，構(gòu)建這樣的URL就很麻煩。

2 構(gòu)建這樣的URL其實很多地方是重復(fù)的，只是少數(shù)的參數(shù)不一樣，對于有大量圖表顯示的系統(tǒng)來說要做很多重復(fù)性的工作。

幸運的是，我們不必重復(fù)發(fā)明輪子了，DEEpak Jois已經(jīng)封裝了該API，他的gem叫做gchartrb，提供一個整潔簡明的方式來生成圖表URL。使用該gem的第一步是安裝它：gem install gchartrb。使用起來超乎想象的簡單，效果也非常的炫，不信？看看我做的一些demo吧：）

場景一 venn圖例如：A有500個元素，B有400個元素，C有300個元素，AB交集為200，AC交集為100， BC交集為50通過以上的數(shù)據(jù)得到代表變量A,B,C的三個圓圈，圓圈的面積代表變量所含元素個數(shù)，圓圈的交集代表變量之間的交集。

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文章投票人數(shù)統(tǒng)計，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 %>

場景四折線圖例如統(tǒng)計每周JE會員增加數(shù)量，一周的數(shù)量分別是 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的數(shù)據(jù)；
3、過濾數(shù)據(jù)；
4、讀取帶命名空間的XML數(shù)據(jù)；
5、處理gb2312編碼的XML；

注：在這里的AS腳本都是在 Adobe Flash CS3 版本以上中進行編寫，flex用戶請自行添加修改相應(yīng)的包引用。

下面開始第一部分，如何加載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的內(nèi)容：

這里不進行代碼解說，關(guān)于XML類，請查看：http://help.adobe.com/zh_TW/AS3LCR/Flash_10.0/XML.html

下面進入第2部分：如何讀取XML數(shù)據(jù)。

2、讀取XML數(shù)據(jù)
2.1直接讀取XML數(shù)據(jù)
對XML數(shù)據(jù)的讀取是十分簡單的，不信請看：

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);
}可得到如何結(jié)果：

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

Sir Arthur Conan Doyle

F. Scott Fitzgerald

Stephen E. Ambrose

Stephen E. Ambrose

2.2、XML和XMLList
這里我們會用到另外一個類XMLList，這個類可以把XML對象作為數(shù)組的方式讀取，可以方便地進行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 快捷鍵對一般開發(fā)者來說都非常有用，本文向大家簡單介紹一下Flex 快捷鍵有哪些，以及它們的具體作用，希望本文的介紹能讓你有所收獲。

◆常用Flex 快捷鍵如下：

Ctrl-F11: 執(zhí)行（Run）
F11: 除錯（Debug）
Ctrl-Alt-Down: 重復(fù)目前所在編輯列（Repeat current line ）
Alt-Up: 移動本列，或選擇列往上移動（Move line (or selection) up ）
Alt-Down: 移動本列，或選擇列下往移動（Move line (or selection) down ）
Ctrl-Click: 移至定義區(qū)（Go to definition (=F3) ）

F3 顯示當(dāng)前選中標(biāo)簽的類定義
Ctrl-D: 刪除本行（Delete line ）
Alt-/: 文字自動完成（Word completion (cycles through possible matches)）
Ctrl-Up: 捲軸向上（Scroll up ）
Ctrl-Down: 捲軸向下（Scroll Down ）
Shift+F2 彈出幫助窗體，顯示選中標(biāo)簽的上下文幫助
F1 在IDE內(nèi)顯示上下文幫助
CTRL+0 在代碼視窗顯示大綱
CTRL+SHIFT+C 加注釋
Ctrl+/：行注釋
Ctrl+Shift+L：所有快捷鍵提示

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

1.) 打開類型 (Ctrl-Shift-T)* - 瀏覽工程中所有類型(AS 類/接口, MXML文件) ，可快速打開它們。

2.) 跳到定義處(F3/Ctrl-點擊目標(biāo))* - 快速跳轉(zhuǎn)到 (類型/變量/函數(shù))定義處。

3.) 快速Outliner視圖 (Ctrl-O)* - 以彈出窗口方式打開outline視圖。

4.) 內(nèi)容相關(guān)幫助 (在目標(biāo)上按F1) - 在MXML標(biāo)簽，函數(shù)或類/接口上按F1會在幫助面板上顯示相關(guān)幫助信息。

5.) 打開內(nèi)容相關(guān)幫助 (Shift-F2) - 會彈出新窗口顯示相關(guān)幫助信息。

6.) 跳到匹配的括號(Ctrl-Shift+P)* - 跳到相對應(yīng)得括號處。

7.) 懸停在目標(biāo)上 - 當(dāng)你把鼠標(biāo)停留在變量上，會顯示變量類型，如果停留在函數(shù)上，則顯示返回類型。

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

9.) 事件類型提示(Ctrl-space) - addEventListener( 顯示所有相關(guān)聯(lián)的事件)

10.) 組織導(dǎo)入(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 } ]);
//定義數(shù)據(jù)源：Month表示數(shù)據(jù)個數(shù)，名字可以隨便定義
]]>
</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表示顯示詳細信息的標(biāo)題，xField表示顯示的第一行數(shù)據(jù)，yField表示顯示的第2行數(shù)據(jù)，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]//綁定數(shù)據(jù)源
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{
//對數(shù)據(jù)源添加第一項和最后一項以達到不覆蓋的效果
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>