上次好象寫了Flex通過web服務訪問數據庫，并綁定一個簡單的Chart.

在Flex Builder 3 里，有很多Chart ，我好象只會一個ColumnChart。不過其他的也差不多。

來個簡單的。上代碼才是王道。。

?

Code
<mx:Panel?layout="absolute"?right="10"?title="ChartTest"?left="10"?top="10"?bottom="10">
????????<mx:Button?id="btnExcute"?x="648"?y="10"?label="Excute"?click="GetXMLDataService.GetXMLData.send()"?/>
????????<mx:TextInput?id="txtSqlCommand"?x="255"?y="10"?width="385"?
????????????text="select?top?10?[name]?,num?as?'y',datepart(yy,saledate)?as?'x'?from?books?order?by?newId()"/>
????????
????????<mx:HDividedBox?liveDragging="true"?horizontalAlign="left"?left="0"?right="0"?top="40"?bottom="10">
????????????<mx:Canvas?width="100%"?height="100%">
????????????????<mx:ColumnChart?id="columnchart1"?left="10"?top="103"?right="18"?bottom="96"?showDataTips="true"?type="clustered">
????????????????????<mx:horizontalAxis>
????????????????????????<mx:CategoryAxis?id="ca"?displayName="display"??categoryField="x"/>
????????????????????</mx:horizontalAxis>

????????????????????<mx:series>
????????????????????????<mx:ColumnSeries?id="cs"?displayName="display"?xField="x"?yField="y"??/>
????????????????????</mx:series>
????????????????</mx:ColumnChart>
????????????????<mx:Legend?dataProvider="{columnchart1}"?x="10"?y="42"/>
????????????????
????????????</mx:Canvas>
????????????<mx:Canvas?width="100%"?height="100%">
????????????????????????????????
????????????</mx:Canvas>
????????</mx:HDividedBox>
????????<mx:HSlider?thumbCount="2"?id="hs1"?width="190"?x="19"?y="20"?showDataTip="true"/>
????????
????</mx:Panel>

我是用了個 HDividedBox，把工作臺分成了兩個 Canvas。

其中?xField表示X軸，yField表示Y軸。

數據綁定在 BindData()

?

Code
//?綁定數據
????????????private?function?BindData():void{
????????????????sqlCommand?=?txtSqlCommand.text;
????????????????dpColumnChart?=?new?XML(GetXMLDataService.GetXMLData.lastResult).children();
????????????????dpPieChart?=?new?XML(GetXMLDataService.GetXMLData.lastResult).children();
????????????????????????????????
????????????????//alert?=?Alert.show(GetXMLDataService.GetXMLData.lastResult)????????????????
????????????????ColumnChartBind(dpColumnChart);
????????????????PieChartBind(dpPieChart);
????????????}
????????????
????????????//?綁定?ColumnChart
????????????private?function?ColumnChartBind(dp:XMLList):void{????????????
????????????????this.columnchart1.horizontalAxis.chartDataProvider?=?dp????????????????
????????????}

其實ColumnChart還有很多其他的控制屬性，如

maxColumnWidth? 方柱的最大寬度 columnWidthRatio? 方柱的寬度比 等等。還可以通過Style調整樣式，Effects增加效果等等。哎。懶的寫了。 學Flex三天了，就這么多。沒東西寫了。 。。

????????????

轉載于:https://www.cnblogs.com/yalon/archive/2008/12/06/Flex_3.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Flex 学习随笔 ---- 玩 Chart的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。