Flex中如何利用eriesInterpolate, SeriesSlide和SeriesZoom效果在图表数据改变是产生不同效果的例子

By Minidxer | October 21, 2008

接下来的例子演示了Flex中如何利用eriesInterpolate, SeriesSlide和SeriesZoom效果，在图表数据改变是产生不同效果。

让我们先来看一下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:Script>
  8.         <![CDATA[
  9.             private function updateDP():void {
  10.                 var str:String = categoryFieldComboBox.selectedItem.data;
  11.                 barSeries.xField = str;
  12.                 barSeries.displayName = str;
  13.             }
  14.         ]]>
  15.     </mx:Script>
  16.  
  17.     <mx:SeriesInterpolate id="seriesInterpolate" duration="1000" />
  18.     <mx:SeriesSlide id="seriesSlide" duration="1000" direction="right" />
  19.     <mx:SeriesZoom id="seriesZoom" duration="1000" />
  20.  
  21.     <mx:Array id="dataEffects">
  22.         <mx:Object label="seriesInterpolate" data="{seriesInterpolate}" />
  23.         <mx:Object label="seriesSlide" data="{seriesSlide}" />
  24.         <mx:Object label="seriesZoom" data="{seriesZoom}" />
  25.     </mx:Array>
  26.  
  27.     <mx:Array id="categoryFields">
  28.         <mx:Object data="obp" label="OBP" />
  29.         <mx:Object data="slg" label="SLG" />
  30.         <mx:Object data="avg" label="AVG" />
  31.     </mx:Array>
  32.  
  33.     <mx:ArrayCollection id="arrColl">
  34.         <mx:source>
  35.             <mx:Array>
  36.                 <mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
  37.                 <mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
  38.                 <mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
  39.                 <mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
  40.                 <mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
  41.             </mx:Array>
  42.         </mx:source>
  43.     </mx:ArrayCollection>
  44.  
  45.     <mx:ApplicationControlBar dock="true">
  46.         <mx:Form>
  47.             <mx:FormItem label="categoryField:">
  48.                 <mx:ComboBox id="categoryFieldComboBox"
  49.                     dataProvider="{categoryFields}"
  50.                         change="updateDP();" />
  51.             </mx:FormItem>
  52.             <mx:FormItem label="showDataEffect:">
  53.                 <mx:ComboBox id="showDataEffectComboBox"
  54.                         dataProvider="{dataEffects}"
  55.                         change="updateDP();" />
  56.             </mx:FormItem>
  57.         </mx:Form>
  58.     </mx:ApplicationControlBar>
  59.  
  60.      <mx:BarChart id="barChart"
  61.              showDataTips="true"
  62.              dataProvider="{arrColl}"
  63.              width="100%"
  64.              height="100%">
  65.         <mx:verticalAxis>
  66.             <mx:CategoryAxis categoryField="name"/>
  67.         </mx:verticalAxis>
  68.         <mx:series>
  69.             <mx:BarSeries id="barSeries"
  70.                     yField="name"
  71.                     xField="obp"
  72.                     displayName="obp"
  73.                     showDataEffect="{showDataEffectComboBox.selectedItem.data}" />
  74.         </mx:series>
  75.     </mx:BarChart>
  76.  
  77. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll