上次好象写了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>
<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
}
// 绑定数据
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三天了,就这么多。没东西写了。 。。