Flex中如何通过direction属性程序中改变图表示例图排列方向的例子

By Minidxer | December 1, 2008

接下来的例子演示了Flex中如何通过direction属性，程序中改变图表示例图排列方向。

让我们先来看一下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.             import mx.events.ItemClickEvent;
  10.  
  11.             private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
  12.                 var idx:uint = ToggleButtonBar(evt.currentTarget).selectedIndex;
  13.                 legend.direction = arr[idx];
  14.             }
  15.         ]]>
  16.     </mx:Script>
  17.  
  18.     <mx:XMLListCollection id="dp">
  19.         <mx:source>
  20.             <mx:XMLList>
  21.                 <quote date="8/27/2007" open="40.38" close="40.81" />
  22.                 <quote date="8/24/2007" open="40.5" close="40.41" />
  23.                 <quote date="8/23/2007" open="40.82" close="40.6" />
  24.                 <quote date="8/22/2007" open="40.4" close="40.77" />
  25.                 <quote date="8/21/2007" open="40.41" close="40.13" />
  26.                 <quote date="8/20/2007" open="40.55" close="40.74" />
  27.                 <quote date="8/17/2007" open="40.18" close="40.32" />
  28.                 <quote date="8/16/2007" open="39.83" close="39.96" />
  29.                 <quote date="8/15/2007" open="40.22" close="40.18" />
  30.                 <quote date="8/14/2007" open="41.01" close="40.41" />
  31.                 <quote date="8/13/2007" open="41" close="40.83" />
  32.                 <quote date="8/10/2007" open="41.3" close="41.06" />
  33.                 <quote date="8/9/2007" open="39.9" close="40.75" />
  34.                 <quote date="8/8/2007" open="39.61" close="40.23" />
  35.                 <quote date="8/7/2007" open="39.08" close="39.42" />
  36.                 <quote date="8/6/2007" open="38.71" close="39.38" />
  37.                 <quote date="8/3/2007" open="39.47" close="38.75" />
  38.                 <quote date="8/2/2007" open="39.4" close="39.52" />
  39.                 <quote date="8/1/2007" open="40.29" close="39.58" />
  40.             </mx:XMLList>
  41.         </mx:source>
  42.     </mx:XMLListCollection>
  43.  
  44.     <mx:Array id="arr">
  45.         <mx:String>horizontal</mx:String>
  46.         <mx:String>vertical</mx:String>
  47.     </mx:Array>
  48.  
  49.     <mx:ApplicationControlBar dock="true">
  50.         <mx:ToggleButtonBar id="toggleButtonBar"
  51.                 dataProvider="{arr}"
  52.                 selectedIndex="0"
  53.                 itemClick="toggleButtonBar_itemClick(event);" />
  54.     </mx:ApplicationControlBar>
  55.  
  56.     <mx:LineChart id="lineChart"
  57.             showDataTips="true"
  58.             dataProvider="{dp}"
  59.             width="100%"
  60.             height="100%">
  61.  
  62.         <!-- series filters -->
  63.         <mx:seriesFilters>
  64.             <mx:Array />
  65.         </mx:seriesFilters>
  66.  
  67.         <!-- vertical axis -->
  68.         <mx:verticalAxis>
  69.             <mx:LinearAxis baseAtZero="false"
  70.                     title="Price" />
  71.         </mx:verticalAxis>
  72.  
  73.         <!-- horizontal axis -->
  74.         <mx:horizontalAxis>
  75.             <mx:CategoryAxis id="ca"
  76.                     categoryField="@date"
  77.                     title="Date" />
  78.         </mx:horizontalAxis>
  79.  
  80.         <!-- horizontal axis renderer -->
  81.         <mx:horizontalAxisRenderers>
  82.             <mx:AxisRenderer axis="{ca}"
  83.                     canDropLabels="true" />
  84.         </mx:horizontalAxisRenderers>
  85.  
  86.         <!-- series -->
  87.         <mx:series>
  88.             <mx:LineSeries yField="@close"
  89.                     form="curve"
  90.                     displayName="Close" />
  91.             <mx:LineSeries yField="@open"
  92.                     form="curve"
  93.                     displayName="Open" />
  94.         </mx:series>
  95.     </mx:LineChart>
  96.  
  97.     <mx:ControlBar>
  98.         <mx:Legend id="legend"
  99.                 dataProvider="{lineChart}"
  100.                 direction="horizontal" />
  101.     </mx:ControlBar>
  102.  
  103. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Chart | No Comments » | Tags: , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll