现在位置: 首页 > 博客文章 > 电脑相关 > IT开发 > 开发语言 > Flex > 正文
小 中 大
Flex图表设计及操作
2014年10月20日 10:43:29 ⁄ Flex ⁄ 共 5001字 ⁄ 暂无评论 ⁄ 被围观 1,873次

本例演示了线型图表、圆饼型图标、区域型图表、条型图表、泡沫型图表以及混合型图表。

截图如下所示：

Flex图表

Code   ViewPrint
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
  3.       xmlns:s="library://ns.adobe.com/flex/spark"  
  4.       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" height="1246" width="1219">  
  5.  <s:layout>  
  6.   <s:BasicLayout/>  
  7.  </s:layout>  
  8.   <fx:Style>  
  9.      @namespace s "library://ns.adobe.com/flex/spark";  
  10.      @namespace mx "library://ns.adobe.com/flex/mx";  
  11.    #bubblechart,#barchart,#pieChart  
  12.   {  
  13.       fontFamily:Arial;  
  14.       fontSize:15;  
  15.       color:#FF0033;  
  16.   }  
  17.   #colChart  
  18.   {  
  19.       gutterLeft:80;  
  20.       gutterRight:50;  
  21.       gutterBottom:50;  
  22.       paddingTop:20;  
  23.   }  
  24.  </fx:Style>  
  25.    
  26.  <fx:Script>  
  27.   <![CDATA[ 
  28.    import mx.collections.ArrayCollection; 
  29.     
  30.    [Bindable] 
  31.    public var expenses:ArrayCollection = new ArrayCollection( 
  32.     [ 
  33.      {Month:"一月",Profit:2000,Expenses:1500,Amount:450}, 
  34.      {Month:"二月",Profit:1000,Expenses:200,Amount:600}, 
  35.      {Month:"三月",Profit:1500,Expenses:500,Amount:300}, 
  36.      {Month:"四月",Profit:1200,Expenses:300,Amount:300}, 
  37.      {Month:"五月",Profit:1600,Expenses:600,Amount:300}, 
  38.      {Month:"六月",Profit:1800,Expenses:700,Amount:300}, 
  39.      {Month:"七月",Profit:1300,Expenses:320,Amount:300}, 
  40.     ] 
  41.    ); 
  42.     
  43.    // 用于混合型图表的数据 
  44.    [Bindable] 
  45.    public var SMITH:Array = [ 
  46.     {date:"2008-08-22",point:45.87}, 
  47.     {date:"2008-08-23",point:45.74}, 
  48.     {date:"2008-08-24",point:45.77}, 
  49.     {date:"2008-08-25",point:46.06} 
  50.      ]; 
  51.    [Bindable] 
  52.    public var DECKER:Array = [ 
  53.     {date:"2008-08-22",point:45.59}, 
  54.     {date:"2008-08-23",point:45.3}, 
  55.     {date:"2008-08-24",point:46.71}, 
  56.     {date:"2008-08-25",point:46.88} 
  57.    ]; 
  58.     
  59.   ]]>    
  60.  </fx:Script>  
  61.    
  62.  <fx:Declarations>  
  63.   <!-- 将非可视元素（例如服务、值对象）放在此处 -->  
  64.  </fx:Declarations>  
  65.    
  66.  <!-- 线图 -->  
  67.  <mx:Panel title="线图" width="322" height="323">    
  68.   <mx:LineChart id="lineChart" dataProvider="{expenses}" showDataTips="true" width="272" height="224">  
  69.    <mx:horizontalAxis>  
  70.     <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/>  
  71.    </mx:horizontalAxis>  
  72.    <mx:series>  
  73.     <mx:LineSeries yField="Profit" displayName="利润"/>  
  74.     <mx:LineSeries yField="Expenses" displayName="费用"/>  
  75.    </mx:series>  
  76.   </mx:LineChart>  
  77.   <mx:Legend dataProvider="{lineChart}"/>  
  78.  </mx:Panel>  
  79.    
  80.  <!-- 饼图 -->  
  81.  <s:Panel x="354" y="-1" width="329" height="324" title="饼图">  
  82.   <mx:PieChart x="79" y="61" id="pieChart" dataProvider="{expenses}" showDataTips="true" width="212" height="205">  
  83.    <mx:series>  
  84.     <mx:PieSeries displayName="Series 1" field="Expenses" nameField="Month" labelField="利润"/>  
  85.    </mx:series>  
  86.   </mx:PieChart>  
  87.   <mx:Legend dataProvider="{pieChart}"/>  
  88.  </s:Panel>  
  89.    
  90.  <!-- 区域图表 -->  
  91.  <mx:Panel title="区域图表" x="709" y="2" width="307" height="321">    
  92.    <!-- showDataTips表示鼠标移动到该点上会显示提示信息 -->  
  93.    <mx:AreaChart id="myChart" dataProvider="{expenses}" showDataTips="true" width="262" height="215">     
  94.     <mx:horizontalAxis>  
  95.      <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/>  
  96.     </mx:horizontalAxis>     
  97.     <mx:series>  
  98.      <mx:AreaSeries yField="Profit" displayName="利润"/>  
  99.     </mx:series>     
  100.    </mx:AreaChart>    
  101.    <mx:Legend dataProvider="{myChart}"/>    
  102.  </mx:Panel>  
  103.    
  104.  <!-- 条形图表 -->  
  105.  <s:Panel x="0" y="353" width="320" height="466" title="条形图表">  
  106.   <mx:BarChart x="10" y="52" id="barchart" width="292" height="350" dataProvider="{expenses}">  
  107.    <mx:verticalAxis>  
  108.     <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/>  
  109.    </mx:verticalAxis>  
  110.    <mx:series>  
  111.     <mx:BarSeries displayName="利润" xField="Profit" yField="Month"/>  
  112.     <mx:BarSeries displayName="费用" xField="Expenses" yField="Month"/>  
  113.    </mx:series>  
  114.   </mx:BarChart>  
  115.   <mx:Legend dataProvider="{barchart}"/>  
  116.  </s:Panel>  
  117.    
  118.  <!-- 泡沫图表 -->  
  119.  <s:Panel x="354" y="353" width="341" height="470" title="泡沫型图表">  
  120.   <mx:BubbleChart x="22" y="69" id="bubblechart" width="295" height="329"  
  121.    minRadius="1" maxRadius="50" dataProvider="{expenses}" showDataTips="true">  
  122.    <mx:series>  
  123.     <mx:BubbleSeries displayName="Profit" xField="Profit" yField="Expenses" radiusField="Amount"/>  
  124.    </mx:series>  
  125.   </mx:BubbleChart>  
  126.   <mx:Legend dataProvider="{bubblechart}"/>  
  127.  </s:Panel>  
  128.    
  129.  <!-- 混合型图表 -->  
  130.  <s:Panel x="709" y="353" width="360" height="469" title="混合型图表">  
  131.   <mx:ColumnChart id="colChart" dataProvider="{SMITH}" showDataTips="true" width="332">  
  132.    <mx:horizontalAxis>  
  133.     <mx:CategoryAxis categoryField="date"/>  
  134.    </mx:horizontalAxis>  
  135.    <mx:verticalAxis>  
  136.     <mx:LinearAxis minimum="45" maximum="47"/>  
  137.    </mx:verticalAxis>  
  138.    <mx:series>  
  139.     <mx:ColumnSeries dataProvider="{SMITH}" xField="date" yField="point" displayName="SMITH">  
  140.     </mx:ColumnSeries>  
  141.     <mx:LineSeries dataProvider="{DECKER}" xField="date" yField="point" displayName="DECKER">       
  142.     </mx:LineSeries>  
  143.    </mx:series>  
  144.   </mx:ColumnChart>  
  145.  </s:Panel>  
  146.    
  147. </s:Application>  

 

原文链接：http://blog.sina.com.cn/s/blog_5f08aea00100sndh.html

分享到0
返回
Avatar photo

作者:

【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. html中可以自定义输入的select下拉列表
  2. 用JavaSctipt保存div中的内容为图片
  3. Jframe开发的一些基本问题
  4. Flex桌面应用程序air打包
  5. Flex中Label自动截取或换行
  6. Linux系统搭建Web服务器
  7. 船舶报文系统项目之发布篇
  8. WordPress中添加置顶功能
ORA-39726:不支持对压缩表执行添加/删除列操作
英国的一对双胞胎兄弟
WordPress中添加置顶功能
网页在线小游戏
2021年豆瓣电影年度最佳电影排行榜（全名单）
Win10 电脑如何找回已知网络的密码
想要宝宝，小两口该知道的怀孕常识!
最疼你的人不是那个甜言蜜语哄你开心的人

给我留言

留言无头像?


插入图片

Copyright © 2010-2024 孟郎郎 辽ICP备19011093号