Flex 学习随笔 ---- 玩 Chart

上次好象写了Flex通过web服务访问数据库，并绑定一个简单的Chart.

在Flex Builder 3 里，有很多Chart ，我好象只会一个ColumnChart。不过其他的也差不多。

来个简单的。上代码才是王道。。

 

<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()

 

// 绑定数据
            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三天了，就这么多。没东西写了。 。。