Flex中如何给LineChart设置坐标轴最大最小范围的例子

By Minidxer | December 4, 2008

接下来的例子演示了Flex中如何给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.         preinitialize="init();">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.charts.chartClasses.IAxis;
  11.             import mx.formatters.CurrencyFormatter;
  12.  
  13.             private var currFormatter:CurrencyFormatter;
  14.  
  15.             private function init():void {
  16.                 currFormatter = new CurrencyFormatter();
  17.                 currFormatter.precision = 2;
  18.             }
  19.  
  20.             private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
  21.                 return currFormatter.format(item);
  22.             }
  23.  
  24.             private function lineChart_creationComplete():void {
  25.                 var linearAxisMinimum:int = Math.floor(linearAxis.computedMinimum);
  26.                 var linearAxisMaximum:int = Math.ceil(linearAxis.computedMaximum);
  27.                 linearAxis.minimum = linearAxisMinimum;
  28.                 linearAxis.maximum = linearAxisMaximum;
  29.             }
  30.         ]]>
  31.     </mx:Script>
  32.  
  33.     <mx:XMLListCollection id="dp">
  34.         <mx:source>
  35.             <mx:XMLList>
  36.                 <quote date="8/27/2007" open="40.38" close="40.81" />
  37.                 <quote date="8/24/2007" open="40.5" close="40.41" />
  38.                 <quote date="8/23/2007" open="40.82" close="40.6" />
  39.                 <quote date="8/22/2007" open="40.4" close="40.77" />
  40.                 <quote date="8/21/2007" open="40.41" close="40.13" />
  41.                 <quote date="8/20/2007" open="40.55" close="40.74" />
  42.                 <quote date="8/17/2007" open="40.18" close="40.32" />
  43.                 <quote date="8/16/2007" open="39.83" close="39.96" />
  44.                 <quote date="8/15/2007" open="40.22" close="40.18" />
  45.                 <quote date="8/14/2007" open="41.01" close="40.41" />
  46.                 <quote date="8/13/2007" open="41" close="40.83" />
  47.                 <quote date="8/10/2007" open="41.3" close="41.06" />
  48.                 <quote date="8/9/2007" open="39.9" close="40.75" />
  49.                 <quote date="8/8/2007" open="39.61" close="40.23" />
  50.                 <quote date="8/7/2007" open="39.08" close="39.42" />
  51.                 <quote date="8/6/2007" open="38.71" close="39.38" />
  52.                 <quote date="8/3/2007" open="39.47" close="38.75" />
  53.                 <quote date="8/2/2007" open="39.4" close="39.52" />
  54.                 <quote date="8/1/2007" open="40.29" close="39.58" />
  55.             </mx:XMLList>
  56.         </mx:source>
  57.     </mx:XMLListCollection>
  58.  
  59.     <mx:ApplicationControlBar dock="true">
  60.         <mx:Form styleName="plain">
  61.             <mx:FormItem label="minimum:">
  62.                 <mx:HSlider id="minSlider"
  63.                         minimum="28"
  64.                         maximum="38"
  65.                         value="38"
  66.                         liveDragging="true"
  67.                         snapInterval="1"
  68.                         change="linearAxis.minimum = event.value;" />
  69.             </mx:FormItem>
  70.             <mx:FormItem label="maximum:">
  71.                 <mx:HSlider id="maxSlider"
  72.                         minimum="42"
  73.                         maximum="52"
  74.                         value="42"
  75.                         liveDragging="true"
  76.                         snapInterval="1"
  77.                         change="linearAxis.maximum = event.value;" />
  78.             </mx:FormItem>
  79.         </mx:Form>
  80.  
  81.         <mx:Spacer width="100%" />
  82.  
  83.         <mx:Legend dataProvider="{lineChart}"
  84.                 direction="horizontal" />
  85.     </mx:ApplicationControlBar>
  86.  
  87.     <mx:LineChart id="lineChart"
  88.             showDataTips="true"
  89.             dataProvider="{dp}"
  90.             width="100%"
  91.             height="100%"
  92.             creationComplete="lineChart_creationComplete();">
  93.  
  94.         <mx:backgroundElements>
  95.             <mx:GridLines id="gridLines"
  96.                     direction="both"
  97.                     verticalTickAligned="false">
  98.                 <mx:verticalStroke>
  99.                     <mx:Stroke color="haloSilver"
  100.                             weight="0"
  101.                             alpha="1.0" />
  102.                 </mx:verticalStroke>
  103.                 <mx:horizontalStroke>
  104.                     <!-- Set alpha to 0 so stroke isn't visible. -->
  105.                     <mx:Stroke color="white"
  106.                             weight="0"
  107.                             alpha="0.0" />
  108.                 </mx:horizontalStroke>
  109.                 <mx:horizontalFill>
  110.                     <mx:SolidColor color="haloSilver"
  111.                             alpha="0.1" />
  112.                 </mx:horizontalFill>
  113.             </mx:GridLines>
  114.         </mx:backgroundElements>
  115.  
  116.         <!-- vertical axis -->
  117.         <mx:verticalAxis>
  118.             <mx:LinearAxis id="linearAxis"
  119.                     baseAtZero="false"
  120.                     title="Price (USD)"
  121.                     minorInterval="0.10"
  122.                     interval="0.5"
  123.                     labelFunction="linearAxis_labelFunc" />
  124.         </mx:verticalAxis>
  125.  
  126.         <!-- horizontal axis -->
  127.         <mx:horizontalAxis>
  128.             <mx:CategoryAxis id="ca"
  129.                     categoryField="@date"
  130.                     title="Date" />
  131.         </mx:horizontalAxis>
  132.  
  133.         <!-- horizontal axis renderer -->
  134.         <mx:horizontalAxisRenderers>
  135.             <mx:AxisRenderer axis="{ca}"
  136.                     canDropLabels="true" />
  137.         </mx:horizontalAxisRenderers>
  138.  
  139.         <!-- series -->
  140.         <mx:series>
  141.             <mx:LineSeries yField="@open"
  142.                     displayName="Open" />
  143.         </mx:series>
  144.     </mx:LineChart>
  145.  
  146. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Chart | 1 Comment » | Tags: , , , ,

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

One comment | Add One

Trackbacks

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll