Flex中如何利用labelPlacement样式设置Legend控件标签（Label）位置的例子

By Minidxer | September 28, 2008

接下来的例子演示了Flex中如何利用labelPlacement样式，设置Legend控件标签（Label）位置。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="Legend_labelPlacement_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:XMLListCollection id="dp">
  9.         <mx:source>
  10.             <mx:XMLList>
  11.                 <product label="Product 1" data="3" />
  12.                 <product label="Product 2" data="1" />
  13.                 <product label="Product 3" data="4" />
  14.                 <product label="Product 4" data="1" />
  15.                 <product label="Product 5" data="5" />
  16.                 <product label="Product 6" data="9" />
  17.             </mx:XMLList>
  18.         </mx:source>
  19.     </mx:XMLListCollection>
  20.  
  21.     <mx:ApplicationControlBar dock="true">
  22.         <mx:Form styleName="plain">
  23.             <mx:FormItem label="direction:">
  24.                 <mx:ComboBox id="directionCB">
  25.                     <mx:dataProvider>
  26.                         <mx:Array>
  27.                             <mx:Object label="horizontal" />
  28.                             <mx:Object label="vertical" />
  29.                         </mx:Array>
  30.                     </mx:dataProvider>
  31.                 </mx:ComboBox>
  32.             </mx:FormItem>
  33.             <mx:FormItem label="labelPlacement:">
  34.                 <mx:ComboBox id="labelPlacementCB" selectedIndex="1">
  35.                     <mx:dataProvider>
  36.                         <mx:Array>
  37.                             <mx:Object label="left" />
  38.                             <mx:Object label="right" />
  39.                         </mx:Array>
  40.                     </mx:dataProvider>
  41.                 </mx:ComboBox>
  42.             </mx:FormItem>
  43.         </mx:Form>
  44.     </mx:ApplicationControlBar>
  45.  
  46.     <mx:Panel styleName="opaquePanel"
  47.             width="100%"
  48.             height="100%">
  49.         <mx:PieChart id="pieChart"
  50.                 dataProvider="{dp}"
  51.                 height="100%"
  52.                 width="100%">
  53.             <mx:series>
  54.                 <mx:PieSeries id="pieSeries"
  55.                         field="@data"
  56.                         nameField="@label"
  57.                         filters="[]" />
  58.             </mx:series>
  59.         </mx:PieChart>
  60.         <mx:ControlBar width="100%">
  61.             <mx:Legend dataProvider="{pieChart}"
  62.                     direction="{directionCB.value}"
  63.                     labelPlacement="{labelPlacementCB.value}"
  64.                     horizontalGap="100"
  65.                     width="100%" />
  66.         </mx:ControlBar>
  67.     </mx:Panel>
  68.  
  69. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Legend | No Comments » | 893 views Tags: ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll