RadarChart
Openzet.org
목차 |
소개
방사형 차트로 어떤 개인이나 단체의 성향을 나타낼 때 유용한 차트이다.
Flex에서는 지원하지 않는 이 차트는 보다 넓은 활용도를 갖고 있으며 사용자에게 보다 시각적으로 접근할 수 있다는 데 큰 장점이 있다.
속성
angularAxisRenderer:IRadarAxisRenderer
RadarChart 의 angularAxis 를 나타내기 위한 렌더러 클래스를 지정하는 속성이다. 기본으로 AngularAxisRenderer 클래스가 지정되어 있으며, 일반적으로 사용하는 AxisRenderer 를 사용할 수 없다.
computedGutters:Rectangle
현재 계산되어진 거터 크기를 나타내며, 읽기 전용 속성이다.
radialAxisRenderer:IRadarAxisRenderer
RadarChart 의 radialAxis 를 나타내기 위한 렌더러 클래스를 지정하는 속성이다. 기본으로 RadialAxisRenderer 클래스가 지정되어 있으며, 일반적으로 사용하는 AxisRenderer 를 사용할 수 없다.
사용법
사용 방법은 Flex 의 일반 Chart 와 동일하다.
horizontalAxis 와 verticalAxis 속성 대신 angularAxis 와 radialAxis 속성을 사용한다.<charts:angularAxis>
<mx:CategoryAxis id="aAxis" categoryField="title"/>
</charts:angularAxis>
<charts:radialAxis>
<mx:LinearAxis id="rAxis"/>
</charts:radialAxis>
series 의 배열에는 RadarSeries 를 사용한다.
<charts:series>
<series:RadarSeries field="data1"/>
<series:RadarSeries field="data2"/>
<series:RadarSeries field="data3"/>
<series:RadarSeries field="data4"/>
</charts:series>
backgroundElements 에 GridLines 대신 RadarLines 를 사용하는데 direction 속성으로 angular, radial, both 를 설정할 수 있으며 기본은 both 이다.
<charts:backgroundElements>
<charts:RadarLines direction="both"/>
</charts:backgroundElements>
애플리케이션 예제
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:openzet="http://www.openzet.org/2009/mxml"
applicationComplete="initApp();"
backgroundGradientColors="[0xFFFFFF, 0xFFFFFF]"
layout="vertical" fontSize="12" xmlns:series="org.openzet.charts.series.*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function initApp():void
{
chr.dataProvider = acData;
}
private var acData:ArrayCollection = new ArrayCollection( [
{ title: "Title 1", data1:78, data2:67, data3:45, data4:25},
{ title: "Title 2", data1:34, data2:78, data3:37, data4:44},
{ title: "Title 3", data1:84, data2:35, data3:72, data4:23},
{ title: "Title 4", data1:45, data2:70, data3:72, data4:23},
{ title: "Title 5", data1:82, data2:75, data3:78, data4:89},
{ title: "Title 6", data1:78, data2:57, data3:30, data4:27},
{ title: "Title 7", data1:78, data2:47, data3:58, data4:73},
{ title: "Title 8", data1:78, data2:87, data3:40, data4:62}
]);
]]>
</mx:Script>
<mx:SeriesInterpolate id="eff" duration="2000"/>
<mx:VBox width="100%" height="100%" horizontalAlign="center">
<mx:Legend dataProvider="{chr}" direction="horizontal"/>
<openzet:RadarChart id="chr" width="100%" height="100%" showDataTips="true" fontSize="12">
<openzet:radialAxis>
<mx:LinearAxis maximum="100" interval="20"/>
</openzet:radialAxis>
<openzet:angularAxisRenderer>
<openzet:AngularAxisRenderer axis="{aAxis}" showLine="true"/>
</openzet:angularAxisRenderer>
<openzet:angularAxis>
<mx:CategoryAxis id="aAxis" categoryField="title"/>
</openzet:angularAxis>
<openzet:backgroundElements>
<openzet:RadarLines/>
</openzet:backgroundElements>
<openzet:series>
<series:RadarSeries field="data1" showDataEffect="{eff}" displayName="Data 1"
itemRenderer="mx.charts.renderers.CircleItemRenderer">
</series:RadarSeries>
<series:RadarSeries field="data2" showDataEffect="{eff}" displayName="Data 2"
itemRenderer="mx.charts.renderers.CircleItemRenderer">
</series:RadarSeries>
<series:RadarSeries field="data3" showDataEffect="{eff}" displayName="Data 3"
itemRenderer="mx.charts.renderers.CircleItemRenderer">
</series:RadarSeries>
<series:RadarSeries field="data4" showDataEffect="{eff}" displayName="Data 4"
itemRenderer="mx.charts.renderers.CircleItemRenderer">
</series:RadarSeries>
</openzet:series>
</openzet:RadarChart>
</mx:VBox>
</mx:Application>
