flex柱状图,线形图,饼图简单示例
2010-11-08 09:34
148 查看
留给自己备用的示例。:)
监听chart的itemClick事件
返回ChartItemEvent,其中
event.hitSet[0].item.Month
可以取到当前的柱子横坐标的值
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:VBox> <mx:Panel width="408" height="480" layout="absolute" horizontalCenter="0" verticalCenter="11" title="柱状图"> <mx:ColumnChart id="myChart" dataProvider="{finance}" horizontalCenter="-1" verticalCenter="48" showDataTips="true" width="346" height="330" > <mx:horizontalAxis><!-- 定义横坐标,绑定到“finance”数据库中的Month上 --> <mx:CategoryAxis dataProvider="{finance}" categoryField="Month" title="(月份)" /> </mx:horizontalAxis> <mx:series><!-- 数据以柱状的形式显示 --> <mx:ColumnSeries xField="Month" yField="In" displayName="收入" /><!-- x为月份,y为收入 --> <mx:ColumnSeries xField="Month" yField="Out" displayName="支出" /><!--x为月份,y为支出 --> <mx:ColumnSeries xField="Month" yField="b" displayName="支b" /><!--x为月份,y为支出 --> </mx:series> </mx:ColumnChart> <!-- Legend组件绑定柱状图中的数据名 --> <mx:Legend dataProvider="{myChart}" y="40" x="30"/> </mx:Panel> <mx:Panel> <mx:PieChart id="chart" showDataTips="true" width="100%" height="100%" dataProvider="{finance}" innerRadius=".3" horizontalCenter="0" verticalCenter="0"> <mx:series> <mx:Array> <mx:PieSeries nameField="Month" field="In" > </mx:PieSeries> </mx:Array> </mx:series> </mx:PieChart> <mx:Legend dataProvider="{chart}" right="0" bottom="0"/> </mx:Panel> <mx:Panel title=" 用Model和source获取xml"> <mx:LineChart id="myChart2" dataProvider="{finance}" showDataTips="true"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="month"/> </mx:horizontalAxis> <mx:series> <mx:LineSeries yField="In" displayName="Banana"/> <mx:LineSeries yField="Out" displayName="Apple"/> <mx:LineSeries yField="b" displayName="Orange"/> </mx:series> </mx:LineChart> <mx:Legend dataProvider="{myChart2}"/> </mx:Panel> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; [Bindable] //定义数据集,数据集的内容为每月的收支情况 public var finance:ArrayCollection = new ArrayCollection( [ {Month:"一月",In:2000,Out:1000,b:3000}, {Month:"二月",In:1000,Out:500,b:1300}, {Month:"三月",In:2500,Out:1100,b:3000}, {Month:"四月",In:3000,Out:1500,b:3000}, {Month:"五月",In:2000,Out:1300,b:300}, {Month:"六月",In:2300,Out:700,b:3000}, {Month:"七月",In:3100,Out:1700,b:3000}, {Month:"八月",In:2300,Out:900,b:3000}, {Month:"九月",In:3200,Out:1600,b:3000}, {Month:"十月",In:2200,Out:600,b:3000}, {Month:"十一月",In:1500,Out:760,b:3000}, {Month:"十二月",In:3500,Out:1000,b:3000}, ]); ]]--> </mx:Script> </mx:VBox> </mx:Application>
监听chart的itemClick事件
返回ChartItemEvent,其中
event.hitSet[0].item.Month
可以取到当前的柱子横坐标的值
相关文章推荐
- flex-设置简单的柱状图ColumnChart(一)
- Java+Flex整合应用简单示例
- flex 整合 struts 的一个简单示例(使用Httpservice)
- flex+blazeds+java后台消息推送(简单示例)
- flex 整合 struts 的一个简单示例(使用Httpservice)
- flex+blazeds+java后台消息推送(简单示例)
- flex 与 java交互 的一个简单示例 (使用RemoteObject)
- Flex与Flash的交互_1(初级简单示例)
- Flex4 Spark组件数据驱动简单示例
- jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
- 利用D3.js实现最简单的柱状图示例代码
- Flex多文件上传简单示例(服务端.net)
- flex 整合 struts 的一个简单示例(使用Httpservice)
- 简单FlexLCDS环境搭建以及示例
- android 开源图表库MPChart最简单使用方法示例教程Demo--折线图 柱状图
- Spring + JAX-WS + Flex 简单实现示例
- 圣杯、双飞翼、flex简单示例
- Java+Flex整合应用简单示例 (mx:RemoteObject)
- Android Https请求的简单使用(Volley Https请求的示例)
- Linux下共享内存简单程序示例