Flex中如何利用canDropLabels样式移除图表中一些水平轴线上标签的例子

By Minidxer | October 28, 2008

接下来的例子演示了Flex中如何利用canDropLabels样式,移除图表中一些水平轴线上标签。

让我们先来看一下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:XML id="quotesXML" source="adbe.xml" format="e4x" />
  8.     <mx:XMLListCollection id="adbe" source="{quotesXML.quote}" />
  9.  
  10.     <mx:String id="ADBE_YAHOO">http://finance.yahoo.com/q?d=t&s=ADBE</mx:String>
  11.  
  12.     <mx:ApplicationControlBar dock="true">
  13.         <mx:CheckBox id="checkBox"
  14.                 label="canDropLabels:"
  15.                 labelPlacement="left" />
  16.     </mx:ApplicationControlBar>
  17.  
  18.     <mx:LinkButton
  19.             label="ADBE"
  20.             click="navigateToURL(new URLRequest(ADBE_YAHOO))"
  21.             fontSize="14"
  22.             fontWeight="bold" />
  23.  
  24.     <mx:HLOCChart id="hlocChart"
  25.             showDataTips="true"
  26.             dataProvider="{adbe}"
  27.             width="100%"
  28.             height="100%">
  29.  
  30.         <!-- vertical axis -->
  31.         <mx:verticalAxis>
  32.             <mx:LinearAxis baseAtZero="false" title="Price" />
  33.         </mx:verticalAxis>
  34.  
  35.         <!-- horizontal axis -->
  36.         <mx:horizontalAxis>
  37.             <mx:CategoryAxis categoryField="@date" title="Date" />
  38.         </mx:horizontalAxis>
  39.  
  40.         <!-- horizontal axis renderer -->
  41.         <mx:horizontalAxisRenderer>
  42.             <mx:AxisRenderer canDropLabels="{checkBox.selected}" />
  43.         </mx:horizontalAxisRenderer>
  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.  
  55. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

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

Search Posts