Flex中如何在PieChart的数据发生变化时弹出显示的例子

By Minidxer | November 19, 2008

接下来的例子演示了Flex中如何在PieChart的数据发生变化时弹出显示。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <?xml version="1.0"?>
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="horizontal"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.events.ListEvent;
  11.             import mx.events.SliderEvent;
  12.  
  13.             private function slider_change(evt:SliderEvent):void {
  14.                 var arr:Array = [];
  15.                 if (evt.value >= 0) {
  16.                     arr[evt.value] = 0.2;
  17.                 }
  18.                 series.perWedgeExplodeRadius = arr;
  19.             }
  20.  
  21.             private function list_itemRollOver(evt:ListEvent):void {
  22.                 var arr:Array = [];
  23.                 arr[evt.rowIndex] = 0.2;
  24.                 series.perWedgeExplodeRadius = arr;
  25.                 /* Update the slider. */
  26.                 slider.value = evt.rowIndex;
  27.             }
  28.  
  29.             private function comboBox_change(evt:ListEvent):void {
  30.                 var field:String = evt.currentTarget.selectedItem.label;
  31.                 series.field = field;
  32.             }
  33.  
  34.             private function series_labelFunc(item:Object, field:String, index:Number, percentValue:Number):String {
  35.                 return item.name + ":\n" + field + ":" + Number(item[field]).toFixed(3);
  36.             }
  37.         ]]>
  38.     </mx:Script>
  39.  
  40.     <mx:ArrayCollection id="arrColl">
  41.         <mx:source>
  42.             <mx:Array>
  43.                 <mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
  44.                 <mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
  45.                 <mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
  46.                 <mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
  47.                 <mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
  48.             </mx:Array>
  49.         </mx:source>
  50.     </mx:ArrayCollection>
  51.  
  52.     <mx:ApplicationControlBar dock="true">
  53.         <mx:Form styleName="plain">
  54.             <mx:FormItem label="explode wedge:">
  55.                 <mx:HSlider id="slider"
  56.                         minimum="-1"
  57.                         maximum="{arrColl.length - 1}"
  58.                         snapInterval="1"
  59.                         liveDragging="true"
  60.                         dataTipPrecision="0"
  61.                         change="slider_change(event);" />
  62.             </mx:FormItem>
  63.             <mx:FormItem label="field">
  64.                 <mx:ComboBox id="comboBox"
  65.                         change="comboBox_change(event);">
  66.                     <mx:dataProvider>
  67.                         <mx:Array>
  68.                             <mx:Object label="avg" />
  69.                             <mx:Object label="obp" />
  70.                             <mx:Object label="slg" />
  71.                         </mx:Array>
  72.                     </mx:dataProvider>
  73.                 </mx:ComboBox>
  74.             </mx:FormItem>
  75.         </mx:Form>
  76.     </mx:ApplicationControlBar>
  77.  
  78.     <mx:List id="list"
  79.             dataProvider="{arrColl}"
  80.             labelField="name"
  81.             width="100"
  82.             height="100%"
  83.             itemRollOver="list_itemRollOver(event);" />
  84.  
  85.     <mx:PieChart id="chart"
  86.             height="100%"
  87.             width="100%"
  88.             showDataTips="true"
  89.             dataProvider="{arrColl}">
  90.         <mx:series>
  91.             <mx:PieSeries id="series"
  92.                     nameField="name"
  93.                     field="avg"
  94.                     labelPosition="callout"
  95.                     labelFunction="series_labelFunc"
  96.                     filters="[]" />
  97.         </mx:series>
  98.     </mx:PieChart>
  99.  
  100. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll