Flex中如何创建图表的例子

By Minidxer | August 17, 2008

接下来的例子演示了Flex中如何将数据转化为图表的形式表示。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             [Bindable]
  10.             [Embed(source='assets/money.png')]
  11.             private var MoneyIcon:Class;
  12.         ]]>
  13.     </mx:Script>
  14.  
  15.     <mx:XML id="quotesXML" source="adbe.xml" format="e4x" />
  16.     <mx:XMLListCollection id="adbe" source="{quotesXML.quote}" />
  17.  
  18.     <mx:String id="ADBE_YAHOO">http://finance.yahoo.com/q?d=t&amp;s=ADBE</mx:String>
  19.  
  20.     <mx:ApplicationControlBar dock="true">
  21.         <mx:LinkButton icon="{MoneyIcon}"
  22.                 label="ADBE"
  23.                 click="navigateToURL(new URLRequest(ADBE_YAHOO))"
  24.                 fontSize="14"
  25.                 fontWeight="bold" />
  26.     </mx:ApplicationControlBar>
  27.  
  28.     <mx:VBox backgroundColor="white" width="100%" height="100%">
  29.         <mx:HLOCChart id="hlocChart"
  30.                 showDataTips="true"
  31.                 dataProvider="{adbe}"
  32.                 width="100%"
  33.                 height="100%">
  34.  
  35.             <!-- vertical axis -->
  36.             <mx:verticalAxis>
  37.                 <mx:LinearAxis baseAtZero="false" />
  38.             </mx:verticalAxis>
  39.  
  40.             <!-- horizontal axis -->
  41.             <mx:horizontalAxis>
  42.                 <mx:CategoryAxis categoryField="@date" title="Date"/>
  43.             </mx:horizontalAxis>
  44.  
  45.             <!-- series -->
  46.             <mx:series>
  47.                 <mx:HLOCSeries id="series1"
  48.                         highField="@high"
  49.                         lowField="@low"
  50.                         openField="@open"
  51.                         closeField="@close"/>
  52.             </mx:series>
  53.         </mx:HLOCChart>
  54.     </mx:VBox>
  55.  
  56. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: , ,

Random Posts

One comment | Add One

Trackbacks

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads