Flex中利用showDataEffect效果和SeriesInterpolate类创建动态效果图表（chart）的例子

By Minidxer | September 28, 2008

接下来的例子演示了Flex中利用showDataEffect效果和SeriesInterpolate类，创建动态效果图表（chart）。类似的动态效果（非图表），可以看一篇更加具体的教程：Tutorials: Step by Step to Create your Sector Menu.

让我们先来看一下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.         creationComplete="initDP();">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             private const MAX_ITEMS:uint = 10;
  11.  
  12.             private function initDP():void {
  13.                 var i:uint;
  14.                 dp = [];
  15.                 for (i = 0; i < MAX_ITEMS; i++) {
  16.                     dp.push({data:getRandomUint(100), label:"item " + i});
  17.                 }
  18.             }
  19.  
  20.             private function getRandomUint(max:uint):uint {
  21.                 return Math.round(Math.random() * max);
  22.             }
  23.         ]]>
  24.     </mx:Script>
  25.  
  26.     <mx:Array id="dp" />
  27.  
  28.     <mx:ApplicationControlBar dock="true">
  29.         <mx:Button label="Change Data"
  30.                 click="initDP();" />
  31.     </mx:ApplicationControlBar>
  32.  
  33.     <mx:PieChart id="chart"
  34.             height="100%"
  35.             width="100%"
  36.             dataProvider="{dp}">
  37.         <mx:series>
  38.             <mx:PieSeries field="data">
  39.                 <mx:showDataEffect>
  40.                     <mx:SeriesInterpolate duration="1000" />
  41.                 </mx:showDataEffect>
  42.             </mx:PieSeries>
  43.         </mx:series>
  44.     </mx:PieChart>
  45.  
  46. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Chart | 1 Comment » | 2,006 views Tags: , , , ,

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

One comment | Add One

  1. keane - 10/13/2009 at 9:30 am

    请问下
    就是那个
    饼图 载入的时候的效果是怎么弄的呀、
    就是
    从一条线逐渐变成一个圆形的。。。

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll