PyramidChart
From Openzet
Contents |
Introduction
This chart control can enhance users' visual experience by displaying data radially, which featue is not natively supported by Flex framework.
Property
layout
Selecting the direction of layout.
angle
Selecting the angle of pramid's tip.
Usage
Basic usage of this chart is the same with normal Flex charts.
<comp:PyramidChart id="pyramid"
left="0" fontSize="12"
angle="15" layout="upward"
labelFunction="labelFunc" field="Gold"
width="100%" height="100%"/>
Application Example
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comp="org.openzet.controls.pyramid.*"
backgroundColor="0xFFFFFF" backgroundAlpha="1" fontSize="12" layout="vertical" xmlns:local="*" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.charts.series.PieSeries;
[Bindable]
private var medalsAC:ArrayCollection = new ArrayCollection( [
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 13, Silver:17, Bronze: 14 },
{ Country: "India", Gold: 19, Silver:17, Bronze: 14 },
{ Country: "France", Gold: 21, Silver:17, Bronze: 14 },
{ Country: "Italy", Gold: 5, Silver:17, Bronze: 14 } ]);
[Bindable]
private var medalsAC2:ArrayCollection = new ArrayCollection( [
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 13, Silver:17, Bronze: 14 },
{ Country: "India", Gold: 19, Silver:17, Bronze: 14 },
{ Country: "France", Gold: 21, Silver:17, Bronze: 14 },
{ Country: "Korea", Gold: 21, Silver:17, Bronze: 14 },
{ Country: "Japan", Gold: 21, Silver:17, Bronze: 14 },
{ Country: "Italy", Gold: 5, Silver:17, Bronze: 14 } ]);
private function init():void
{
pyramid.dataProvider = medalsAC;
}
public function labelFunc(item:Object):String
{
return item.Country + " : " + item.Gold;
}
private function clickHandler(event:MouseEvent):void
{
pyramid.dataProvider = pyramid.dataProvider == medalsAC2 ? medalsAC : medalsAC2;
}
private function changeLayout(event:MouseEvent):void
{
pyramid.layout = pyramid.layout == "upward"? "downward" : "upward";
}
private function changeHandler(event:Event):void
{
pyramid.angle = event.currentTarget.value;
}
]]>
</mx:Script>
<comp:PyramidChart id="pyramid" left="0" fontSize="12" angle="15" layout="upward" labelFunction="labelFunc" fillInside="false" field="Gold" width="100%" height="100%">
<comp:stroke>
<mx:Stroke color="0xE8E8E8" alpha="0.1" />
</comp:stroke>
<comp:fills>
<mx:Array>
<mx:LinearGradient>
<mx:Array>
<mx:GradientEntry color="0x147a7b" />
<mx:GradientEntry color="0x439a99" />
</mx:Array>
</mx:LinearGradient>
<mx:LinearGradient>
<mx:Array>
<mx:GradientEntry color="0x769814" />
<mx:GradientEntry color="0xa6c843" />
</mx:Array>
</mx:LinearGradient>
<mx:LinearGradient>
<mx:Array>
<mx:GradientEntry color="0xc59c1f" />
<mx:GradientEntry color="0xf8cf52" />
</mx:Array>
</mx:LinearGradient>
<mx:LinearGradient>
<mx:Array>
<mx:GradientEntry color="0xcc7846" />
<mx:GradientEntry color="0xe79f6c" />
</mx:Array>
</mx:LinearGradient>
<mx:LinearGradient>
<mx:Array>
<mx:GradientEntry color="0x94b1ca" />
<mx:GradientEntry color="0xc5e2f8" />
</mx:Array>
</mx:LinearGradient>
</mx:Array>
</comp:fills>
</comp:PyramidChart>
<mx:HBox width="100%" horizontalAlign="center">
<mx:Button label="Change Data" click="clickHandler(event)" />
<mx:Button label="Change Layout" click="changeLayout(event);" />
<mx:Label text="Angle :" />
<mx:HSlider minimum="0" maximum="90" change="changeHandler(event);" />
</mx:HBox>
</mx:Application>
