PyramidChart
Openzet.org
목차 |
소개
데이터를 피라미드의 형태로 나타내어 준다.
Flex에서는 지원하지 않는 이 차트는 보다 넓은 활용도를 갖고 있으며 사용자에게 보다 시각적으로 접근할 수 있다는 데 큰 장점이 있다.
속성
layout
Pyramid의 방향을 정한다.
angle
Pyramid 첨단의 각을 정한다.
사용법
사용 방법은 Flex 의 일반 Chart 와 동일하다.
<comp:PyramidChart id="pyramid"
left="0" fontSize="12"
angle="15" layout="upward"
labelFunction="labelFunc" field="Gold"
width="100%" height="100%"/>
애플리케이션 예제
<?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>
