Flex中如何利用innerRadius样式创建一定形状的圈形饼图（donut shaped pie charts）的例子

By Minidxer | October 19, 2008

接下来的例子演示了Flex中如何利用innerRadius样式，创建一定形状的圈形饼图（donut shaped pie charts）。

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

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function labelFunc(item:Object, field:String, index:Number, percentValue:Number):String {
return item.name + ": " + 'n' + "AVG: " + item.avg;
}
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
<mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
<mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
<mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
<mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:ApplicationControlBar dock="true">
<mx:Label text="innerRadius:" />
<mx:HSlider id="slider"
minimum="0"
maximum="0.5"
liveDragging="true" />
</mx:ApplicationControlBar>
<mx:PieChart id="chart"
height="100%"
width="100%"
innerRadius="{slider.value}"
showDataTips="true"
dataProvider="{arrColl}" >
<mx:series>
<mx:PieSeries labelPosition="callout"
field="avg"
labelFunction="labelFunc">
<mx:calloutStroke>
<mx:Stroke weight="0"
color="0x888888"
alpha="100"/>
</mx:calloutStroke>
<mx:radialStroke>
<mx:Stroke weight="0"
color="#FFFFFF"
alpha="20"/>
</mx:radialStroke>
<mx:stroke>
<mx:Stroke color="0"
alpha="20"
weight="2"/>
</mx:stroke>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
</mx:Application>

代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Chart | No Comments » | Tags: innerRadius, PieChart, 饼图

中文Flex例子