Flex按時間段畫動態(tài)曲線圖，代碼如下:
<?xml version="1.0"?> <mx:Script> [Bindable] private function init():void { <mx:Panel title="DateTimeAxis Example" height="100%" width="100%"> <mx:verticalAxis> <mx:series> <?xml version="1.0"?> <mx:Script> [Bindable] private function init():void { <mx:Panel title="DateTimeAxis Example" height="100%" width="100%"> <mx:verticalAxis> <mx:series> <?xml version="1.0" encoding="utf-8"?> [Bindable] // in the event that the service faults or times out /* private function callService():void { <?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0"?> <mx:Model id="results" source="price.xml"/> <mx:Panel title=" 將xml轉(zhuǎn)換成Array形式的數(shù)據(jù)源"> <mx:Application xmlns:mx="<mx:HTTPService id="srv" url="price.xml"/> <mx:Panel title=" 用HTTPService來獲取xml數(shù)據(jù)源"> 方法四:將HTTPService 獲取的數(shù)據(jù)源轉(zhuǎn)換成ArrayCollection 注意: HTTPService需要 creationComplete="srv.send()"來獲取數(shù)據(jù)源 <?xml version="1.0"?> <mx:HTTPService Flex： 實時曲線圖(定時獲取后臺數(shù)據(jù)) 這里主要是通過setInterval(addArr,MINISECENDS);來實現(xiàn)一秒跳動一次的。當(dāng)然還有setTime來做 不過setTime做起來感覺很麻煩。 <mx:Application xmlns:mx="<mx:Style> 使用infoSymbol，用flex的餅圖柱狀圖進(jìn)行渲染 <esri:InfoSymbol id="PointSym" infoPlacement="center" containerStyleName="InfoSymbol"> 注：chart里面的{data}就是渲染的graphic的attribute 接下來的例子演示了Flex中如何將數(shù)據(jù)轉(zhuǎn)化為圖表的形式表示。 ] <?xml version="1.0" encoding="UTF-8"?> 去年年底的時候，所做的一個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' <%= image_tag @chart %> 場景二 柱狀圖 例如JE會員分布圖，beijing 20000人， shanghai 18000人，tianjin 10000人，nanjing 8000 ，guangzhou 14000，shenzhen 16000 Ruby代碼 def bar_chart <%= image_tag @chart %> 場景三 餅狀圖 例如JE文章投票人數(shù)統(tǒng)計，very good 200票， good 150票，just so so100票，bad 180票 Ruby代碼 def pie_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| <%= image_tag @chart %> 1、加載XML文件； 注：在這里的AS腳本都是在 Adobe Flash CS3 版本以上中進(jìn)行編寫，flex用戶請自行添加修改相應(yīng)的包引用。 下面開始第一部分，如何加載XML文件！ 1、加載XML文件 var xmlLoader:URLLoader = new URLLoader(); 這里不進(jìn)行代碼解說，關(guān)于XML類，請查看：http://help.adobe.com/zh_TW/AS3LCR/Flash_10.0/XML.html 下面進(jìn)入第2部分：如何讀取XML數(shù)據(jù)。 2、讀取XML數(shù)據(jù) function LoadXML(e:Event):void { XML Output 2.2、XML和XMLList function ParseBooks(bookInput:XML):void { Ctrl-F11: 執(zhí)行（Run） F3 顯示當(dāng)前選中標(biāo)簽的類定義 ◆另外還有一些不怎么常用的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)* <mx:Script> [Bindable] //showDataTips表示是否顯示每一個氣泡的詳細(xì)信息 //displayName表示顯示詳細(xì)信息的標(biāo)題，xField表示顯示的第一行數(shù)據(jù)，yField表示顯示的第2行數(shù)據(jù)，radiusField表示氣泡的大小 <!--自定義筆觸效果外框顏色 --> <mx:LineSeries form="curve" xField="name" yField="value"/>
<!-- Simple example to demonstrate the DateTimeAxis class. -->
<mx:Application xmlns:mx="
<![CDATA[
import mx.charts.chartClasses.AxisLabelSet;
import mx.formatters.DateFormatter;
import mx.charts.chartClasses.IAxis;
import mx.collections.ArrayCollection;
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;
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: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:LinearAxis baseAtZero="true" />
</mx:verticalAxis>
<mx:LineSeries yField="valueTest" xField="date" displayName="TestData" dataProvider="{this.testDatas}"/>
</mx:series>
</mx:LineChart>
</mx:Panel>
</mx:Application>
flex使用后臺返回xml生成餅狀圖
<!-- Simple example to demonstrate the DateTimeAxis class. -->
<mx:Application xmlns:mx="
<![CDATA[
import mx.controls.Alert;
import mx.charts.chartClasses.AxisLabelSet;
import mx.formatters.DateFormatter;
import mx.charts.chartClasses.IAxis;
import mx.collections.ArrayCollection;
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;
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: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:LinearAxis baseAtZero="true" />
</mx:verticalAxis>
<mx:LineSeries yField="valueTest" xField="date" displayName="TestData" dataProvider="{this.testDatas}"/>
</mx:series>
</mx:LineChart>
</mx:Panel>
</mx:Application>
<mx:Application xmlns:mx="<!-- 從后臺獲取數(shù)據(jù) -->
<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;
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);
}
private function serviceFault(event:Event):void {
trace('broken service');
}
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>
程序代碼 程序代碼
<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
程序代碼 程序代碼
方法二:
將xml數(shù)據(jù)源轉(zhuǎn)換成Array再作為圖表的數(shù)據(jù)源
程序代碼 程序代碼
<mx:Application xmlns:mx="<mx:Script>
import mx.utils.ArrayUtil;
</mx:Script>
<mx:ArrayCollection id="myAC"
source="{ArrayUtil.toArray(results.result)}"
/>
<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: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>
<mx:Application xmlns:mx="<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var myData:ArrayCollection;
]]></mx:Script>
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>
如果想通過后臺交互的話 那就改改addArr這個方法就行啦 代碼如下：
.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="隨機(jī)數(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>
<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>
<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>
------------------------------
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 '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 %>
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
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 %>
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
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 %>
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
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 %>
這里我分三步描述flash讀XML的基本方法，以及外延一個對帶命名空間的XML的讀取方法，如下目錄：
2、讀取XML的數(shù)據(jù)；
3、過濾數(shù)據(jù)；
4、讀取帶命名空間的XML數(shù)據(jù)；
5、處理gb2312編碼的XML；
在腳本編輯器中寫入以下代碼：
var xmlData:XML = null;
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.load(new URLRequest("
function LoadXML(e:Event):void {
xmlData = new XML(e.target.data);
trace(xmlData);
}按Ctrl+Enter運行它，你會在輸出窗口中看到整個XML的內(nèi)容：
2.1直接讀取XML數(shù)據(jù)
對XML數(shù)據(jù)的讀取是十分簡單的，不信請看：
xmlData = new XML(e.target.data);
ParseBooks(xmlData);
}
function ParseBooks(bookInput:XML):void {
trace("XML Output");
trace("------------------------");
trace(bookInput.Book);
}可得到如何結(jié)果：
------------------------
Sir Arthur Conan Doyle
F. Scott Fitzgerald
Stephen E. Ambrose
Stephen E. Ambrose
這里我們會用到另外一個類XMLList，這個類可以把XML對象作為數(shù)組的方式讀取，可以方便地進(jìn)行for each操作。
trace("XML Output");
trace("------------------------");
var authorList:XMLList = bookInput.Book.author;
for each (var authorElement:XML in authorList) {
trace(authorElement);
}
} 2.3歷遍子元素
function ParseBooks(bookInput:XML):void {
trace("XML Output");
trace("------------------------");
var bookChildren:XMLList = bookInput.Book.children();
for each (var bookInfo:XML in bookChildren) {
trace(bookInfo);
}
}
Flex 快捷鍵對一般開發(fā)者來說都非常有用，本文向大家簡單介紹一下Flex 快捷鍵有哪些，以及它們的具體作用，希望本文的介紹能讓你有所收獲。
◆常用Flex 快捷鍵如下：
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) ）
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： 所有快捷鍵提示
<?xml version="1.0"?>
<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
<mx:Application xmlns:mx="
<![CDATA[
import mx.collections.ArrayCollection;
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">
<mx:series>
<mx:BubbleSeries displayName="Profix/Expenses/Amount" yField="Expenses" radiusField="Amount" xField="Profit"/>
</mx:series>
</mx:BubbleChart>
<mx:Legend dataProvider="{JBubber}"/>
</mx:Panel>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="<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ù)源添加第一項和最后一項以達(dá)到不覆蓋的效果
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}">
<!--橫軸軸線樣式 cps是控制邊緣形狀的屬性-->
<mx:axisStroke>
<mx:Stroke color="red" weight="4" caps="round"/>
</mx:axisStroke>
<!--刻度樣式-->
<!--<mx:tickStroke>
<mx:Stroke color="blue" weight="3"/>
</mx:tickStroke>-->
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<!--豎直軸的樣式渲染 placement是顯示位置的刻度線-->
<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:secondSeries>-->
<mx:series>
<mx:LineSeries yField="value" form="curve" displayName="value" lineStroke="{s3}"/>
</mx:series>
</mx:LineChart>
</mx:Application>
