Flex中如何利用explodeRadius属性分散PieChart图表的各数据块的例子

By Minidxer | November 20, 2008

接下来的例子演示了Flex中如何利用explodeRadius属性，分散PieChart图表的各数据块。

让我们先来看一下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.             import mx.events.SliderEvent;
  10.  
  11.             private function setExplodeRadius(evt:SliderEvent):void {
  12.                 pieSeries.explodeRadius = evt.value;
  13.             }
  14.         ]]>
  15.     </mx:Script>
  16.  
  17.     <mx:XML id="dp">
  18.         <products>
  19.             <product label="Product 1" data="3" />
  20.             <product label="Product 2" data="1" />
  21.             <product label="Product 3" data="4" />
  22.             <product label="Product 4" data="1" />
  23.             <product label="Product 5" data="5" />
  24.             <product label="Product 6" data="9" />
  25.         </products>
  26.     </mx:XML>
  27.  
  28.     <mx:ApplicationControlBar dock="true">
  29.         <mx:Form styleName="plain">
  30.             <mx:FormItem label="explodeRadius:">
  31.                 <mx:HSlider id="slider"
  32.                         minimum="0.0"
  33.                         maximum="0.8"
  34.                         value="0.2"
  35.                         liveDragging="true"
  36.                         showTrackHighlight="true"
  37.                         snapInterval="0.1"
  38.                         tickInterval="0.1"
  39.                         change="setExplodeRadius(event);" />
  40.             </mx:FormItem>
  41.         </mx:Form>
  42.     </mx:ApplicationControlBar>
  43.  
  44.     <mx:PieChart id="pieChart"
  45.             dataProvider="{dp.product}"
  46.             height="100%"
  47.             width="100%">
  48.         <mx:series>
  49.             <mx:PieSeries id="pieSeries"
  50.                     field="@data"
  51.                     labelPosition="callout">
  52.                 <mx:explodeRadius>0.2</mx:explodeRadius>
  53.                 <mx:filters>
  54.                     <mx:Array />
  55.                 </mx:filters>
  56.             </mx:PieSeries>
  57.         </mx:series>
  58.     </mx:PieChart>
  59.  
  60. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Chart | 1 Comment » | Tags: , ,

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

One comment | Add One

  1. wolfee - 11/21/2008 at 11:50 am

    真是太让我惊讶了，博主生活和工作在日本，居然有这么多精力来写博文，实在是佩服至极！我也要努力搏一把了！

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll