flex做報表的功能比較強大,還有個專門做報表anyChart類庫,不過人家是收費的額,不過做折綫圖
報表,lineChart功能基本達到了。比較特別的是它的數據源格式,每一筆數據中,要包含橫座標的數據
和每條折綫在這個橫座標上對應的縱座標的數據,所以sql寫起來也比較費勁,不過還是可以解決的。
這里是個可以動態添加折綫條數的例子,如果需要其他例子可以到http://blog.flexexamples.com/上
找,資源豐富。。。
flex3.5
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.charts.HitData;
import mx.controls.Alert;
import mx.controls.HorizontalList;
import mx.charts.series.LineSeries;
import mx.charts.LineChart;
import mx.collections.ArrayCollection;
private var dataSource:ArrayCollection = new ArrayCollection([{Hour:"8:00",Profit:70,Expenses:90,Amount:80},{Hour:"9:00"
,Profit:80,Expenses:85,Amount:85},{Hour:"10:00",Profit:85,Expenses:90,Amount:90},{Hour:"11:00",
Profit:75,Expenses:98,Amount:78}]);
//縱座標數據
private var dataArray:Array = new Array("Profit","Expenses","Amount");
private function init():void{
var arr:Array = new Array();
//動態添加lineSeries
for(var i:int = 0; i < dataArray.length ; i ++){
var line:LineSeries = new LineSeries();
line.xField = "Hour";
line.yField = dataArray[i];
line.displayName= dataArray[i];
arr.push(line);
}
myChart.series = arr;
}
//鼠標指示的效果
private function ShowTipData(hd:HitData):String{
var result:String="";
var dataKeyObj:Object=hd.element;
var dataValue:Object=hd.item;
result="數列: '"+dataKeyObj.yField+"'\n"+"資料點: '"+dataValue[dataKeyObj.xField]+"'\n"+"值: "+dataValue[dataKeyObj.yField];
return result;
}
]]>
</mx:Script>
<mx:Legend dataProvider="{myChart}"
direction="vertical" />
<mx:LineChart id="myChart"
dataProvider="{dataSource}"
showDataTips="true" dataTipFunction="ShowTipData">
<!--橫座標-->
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Hour"/>
</mx:horizontalAxis>
<!--縱座標-->
<mx:verticalAxis>
<mx:LinearAxis
title="百分率(%)"/>
</mx:verticalAxis>
<mx:series>
<mx:LineSeries xField="Hour" form="curve"/>
</mx:series>
<!--背景 -->
<mx:backgroundElements>
<mx:GridLines id="gridLines"
direction="both"
verticalTickAligned="false">
<mx:verticalStroke>
<mx:Stroke color="haloSilver"
weight="0"
alpha="1.0" />
</mx:verticalStroke>
<mx:horizontalStroke>
<!-- Set alpha to 0 so stroke isn't visible. -->
<mx:Stroke color="white"
weight="0"
alpha="0.0" />
</mx:horizontalStroke>
<mx:horizontalFill>
<mx:SolidColor color="haloSilver"
alpha="0.1" />
</mx:horizontalFill>
</mx:GridLines>
</mx:backgroundElements>
</mx:LineChart>
<!--線條顏色說明-->
</mx:Application>