Flex中如何创建clustered, stacked, overlaid以及100% Bar charts（图表）的例子

By Minidxer | October 19, 2008

接下来的例子演示了Flex中如何创建clustered, stacked, overlaid以及100% Bar charts（图表）。

让我们先来看一下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:ApplicationControlBar dock="true">
  8.         <mx:Form>
  9.             <mx:FormItem label="type:">
  10.                 <mx:ComboBox id="comboBox">
  11.                     <mx:dataProvider>
  12.                         <mx:Object label="clustered" />
  13.                         <mx:Object label="stacked" />
  14.                         <mx:Object label="100%" />
  15.                         <mx:Object label="overlaid" />
  16.                     </mx:dataProvider>
  17.                 </mx:ComboBox>
  18.             </mx:FormItem>
  19.             <mx:FormItem label="showDataTips:">
  20.                 <mx:CheckBox id="checkBox1" />
  21.             </mx:FormItem>
  22.             <mx:FormItem label="showAllDataTips:">
  23.                 <mx:CheckBox id="checkBox2" />
  24.             </mx:FormItem>
  25.         </mx:Form>
  26.  
  27.         <mx:Spacer width="100%" />
  28.  
  29.         <mx:Legend dataProvider="{barChart}"/>
  30.     </mx:ApplicationControlBar>
  31.  
  32.     <mx:BarChart id="barChart"
  33.             type="{comboBox.selectedItem.label}"
  34.             showDataTips="{checkBox1.selected}"
  35.             showAllDataTips="{checkBox2.selected}"
  36.             height="100%"
  37.             width="100%">
  38.  
  39.         <mx:dataProvider>
  40.             <mx:Array>
  41.                 <mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
  42.                 <mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
  43.                 <mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
  44.                 <mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
  45.                 <mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
  46.             </mx:Array>
  47.         </mx:dataProvider>
  48.  
  49.         <mx:verticalAxis>
  50.             <mx:CategoryAxis categoryField="name"/>
  51.         </mx:verticalAxis>
  52.  
  53.         <mx:series>
  54.             <mx:BarSeries yField="name" xField="obp" displayName="OBP"/>
  55.             <mx:BarSeries yField="name" xField="slg" displayName="SLG"/>
  56.             <mx:BarSeries yField="name" xField="avg" displayName="AVG"/>
  57.         </mx:series>
  58.     </mx:BarChart>
  59.  
  60. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll