Flex按时间段画动态曲线图，代码如下:
<?xml version="1.0"?>
<!-- Simple example to demonstrate the DateTimeAxis class. -->
<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.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>
<?xml version="1.0"?>
<!-- Simple example to demonstrate the DateTimeAxis class. -->
<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;
[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.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,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,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.esri.com/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>
<?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%">
<!-- vertical axis -->
<mx:verticalAxis>
<mx:Linearaxis baseAtZero="false" />
</mx:verticalAxis>
<!-- horizontal axis -->
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="@date" title="Date"/>
</mx:horizontalAxis>
<!-- series -->
<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,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",'0000ff'
vd.data "Green",'00ff00'
vd.data "Red",'ff0000'
vd.intersections 200,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',false) do |bc|
bc.data "beijing",'0000ff'
bc.data "shanghai",'ff0000'
bc.data "tianjin",'00ff00'
bc.data "nanjing",'00aaff'
bc.data "guangzhou",'0effee'
bc.data "shenzhen",'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',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',true) do |lcxy|
lcxy.data "amount",'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文件！
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = null;
xmlLoader.addEventListener(Event.COMPLETE,LoadXML);
xmlLoader.load(new URLRequest("http://www.kirupa.com/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操作。
function ParseBooks(bookInput:XML):void {
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);
}
}
<?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",
{ Time: "11:30",
{ Time: "11:45",
{ Time: "12:00",
{ Time: "12:15",
{ Time: "12:30",
{ Time: "12:45",
{ Time: "13:00",
{ Time: "13:15",
{ Time: "13:30",
{ Time: "13:45",
{ Time: "14:00",
{ Time: "14:15",
{ Time: "14:30",
{ Time: "14:45",
{ Time: "15:00",股票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"?>
<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
<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",
{name:"4",value:200},
{name:"5",value:800},
{name:"6",value:100},
{name:"7",
{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}">
<!--横轴轴线样式 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: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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
