Flex中如何利用baseAtZero属性控制曲线图（LineChart）最大或最小值归零的例子

By Minidxer | November 22, 2008

接下来的例子演示了Flex中如何利用baseAtZero属性，控制曲线图（LineChart）最大或最小值归零。

让我们先来看一下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:XMLListCollection id="dp">
  8.         <mx:source>
  9.             <mx:XMLList>
  10.                 <quote date="8/27/2007" open="40.38" high="41.11" low="40.25" close="40.81" />
  11.                 <quote date="8/24/2007" open="40.5" high="40.65" low="39.8" close="40.41" />
  12.                 <quote date="8/23/2007" open="40.82" high="40.99" low="40.33" close="40.6" />
  13.                 <quote date="8/22/2007" open="40.4" high="41" low="40.2" close="40.77" />
  14.                 <quote date="8/21/2007" open="40.41" high="40.95" low="39.87" close="40.13" />
  15.                 <quote date="8/20/2007" open="40.55" high="40.85" low="39.94" close="40.74" />
  16.                 <quote date="8/17/2007" open="40.18" high="40.48" low="39.32" close="40.32" />
  17.                 <quote date="8/16/2007" open="39.83" high="40.56" low="39.28" close="39.96" />
  18.                 <quote date="8/15/2007" open="40.22" high="41.25" low="40.12" close="40.18" />
  19.                 <quote date="8/14/2007" open="41.01" high="41.05" low="40.18" close="40.41" />
  20.                 <quote date="8/13/2007" open="41" high="41.13" low="40.26" close="40.83" />
  21.                 <quote date="8/10/2007" open="41.3" high="41.62" low="40.1" close="41.06" />
  22.                 <quote date="8/9/2007" open="39.9" high="41.74" low="39.86" close="40.75" />
  23.                 <quote date="8/8/2007" open="39.61" high="40.67" low="39.5" close="40.23" />
  24.                 <quote date="8/7/2007" open="39.08" high="39.91" low="38.61" close="39.42" />
  25.                 <quote date="8/6/2007" open="38.71" high="39.77" low="38.54" close="39.38" />
  26.                 <quote date="8/3/2007" open="39.47" high="39.66" low="38.7" close="38.75" />
  27.                 <quote date="8/2/2007" open="39.4" high="39.8" low="39.05" close="39.52" />
  28.                 <quote date="8/1/2007" open="40.29" high="40.49" low="38.57" close="39.58" />
  29.             </mx:XMLList>
  30.         </mx:source>
  31.     </mx:XMLListCollection>
  32.  
  33.     <mx:ApplicationControlBar dock="true">
  34.         <mx:CheckBox id="checkBox"
  35.                 label="baseAtZero:"
  36.                 labelPlacement="left"
  37.                 selected="false" />
  38.  
  39.         <mx:Spacer width="100%" />
  40.  
  41.         <mx:Legend dataProvider="{lineChart}" />
  42.     </mx:ApplicationControlBar>
  43.  
  44.     <mx:LineChart id="lineChart"
  45.             showDataTips="true"
  46.             dataProvider="{dp}"
  47.             width="100%"
  48.             height="100%">
  49.  
  50.         <!-- series filters -->
  51.         <mx:seriesFilters>
  52.             <mx:Array />
  53.         </mx:seriesFilters>
  54.  
  55.         <!-- vertical axis -->
  56.         <mx:verticalAxis>
  57.             <mx:LinearAxis baseAtZero="{checkBox.selected}" title="Price" />
  58.         </mx:verticalAxis>
  59.  
  60.         <!-- horizontal axis -->
  61.         <mx:horizontalAxis>
  62.             <mx:CategoryAxis id="ca" categoryField="@date" title="Date" />
  63.         </mx:horizontalAxis>
  64.  
  65.         <!-- horizontal axis renderer -->
  66.         <mx:horizontalAxisRenderers>
  67.             <mx:AxisRenderer axis="{ca}" canDropLabels="true" />
  68.         </mx:horizontalAxisRenderers>
  69.  
  70.         <!-- series -->
  71.         <mx:series>
  72.             <mx:LineSeries yField="@close" form="curve" displayName="Close" />
  73.             <mx:LineSeries yField="@open" form="curve" displayName="Open" />
  74.         </mx:series>
  75.  
  76.     </mx:LineChart>
  77.  
  78. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll