Flex中如何通过labelRotation样式对图表中横向，竖向的轴线标签进行旋转操作的例子

By Minidxer | October 22, 2008

接下来的例子演示了Flex中如何通过labelRotation样式，对图表中横向，竖向的轴线标签进行旋转操作。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Style>
  8.         @font-face {
  9.             src: local("Arial");
  10.             font-family: EmbeddedArial;
  11.         }
  12.  
  13.         BarChart {
  14.             font-family: EmbeddedArial;
  15.         }
  16.     </mx:Style>
  17.  
  18.     <mx:ArrayCollection id="arrColl">
  19.         <mx:source>
  20.             <mx:Array>
  21.                 <mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
  22.                 <mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
  23.                 <mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
  24.                 <mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
  25.                 <mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
  26.             </mx:Array>
  27.         </mx:source>
  28.     </mx:ArrayCollection>
  29.  
  30.     <mx:ApplicationControlBar dock="true">
  31.         <mx:Form>
  32.             <mx:FormHeading label="labelRotation" />
  33.             <mx:FormItem label="horizontalAxisRenderer:">
  34.                 <mx:HSlider id="horizontalLabelRotation"
  35.                         minimum="-90"
  36.                         maximum="90"
  37.                         value="0"
  38.                         liveDragging="true"
  39.                         snapInterval="10"
  40.                         tickInterval="10" />
  41.             </mx:FormItem>
  42.             <mx:FormItem label="verticalAxisRenderer:">
  43.                 <mx:HSlider id="verticalLabelRotation"
  44.                         minimum="-90"
  45.                         maximum="90"
  46.                         value="0"
  47.                         liveDragging="true"
  48.                         snapInterval="10"
  49.                         tickInterval="10" />
  50.             </mx:FormItem>
  51.         </mx:Form>
  52.  
  53.         <mx:Spacer width="100%" />
  54.  
  55.         <mx:Legend dataProvider="{barChart}"/>
  56.     </mx:ApplicationControlBar>
  57.  
  58.     <mx:BarChart id="barChart"
  59.              showDataTips="true"
  60.              dataProvider="{arrColl}"
  61.              width="100%"
  62.              height="100%">
  63.  
  64.         <!-- vertical axis -->
  65.         <mx:verticalAxis>
  66.             <mx:CategoryAxis categoryField="name" title="Player"/>
  67.         </mx:verticalAxis>
  68.  
  69.         <!-- vertical axis renderer -->
  70.         <mx:verticalAxisRenderer>
  71.             <mx:AxisRenderer labelRotation="{verticalLabelRotation.value}" />
  72.         </mx:verticalAxisRenderer>
  73.  
  74.         <!-- horizontal axis renderer -->
  75.         <mx:horizontalAxisRenderer>
  76.             <mx:AxisRenderer labelRotation="{horizontalLabelRotation.value}" />
  77.         </mx:horizontalAxisRenderer>
  78.  
  79.         <!-- series -->
  80.         <mx:series>
  81.             <mx:BarSeries id="obpSeries"
  82.                     yField="name"
  83.                     xField="obp"
  84.                     displayName="obp" />
  85.             <mx:BarSeries id="slgSeries"
  86.                     yField="name"
  87.                     xField="slg"
  88.                     displayName="slg" />
  89.             <mx:BarSeries id="avgSeries"
  90.                     yField="name"
  91.                     xField="avg"
  92.                     displayName="avg" />
  93.         </mx:series>
  94.     </mx:BarChart>
  95.  
  96. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll