ChartZoomer
Openzet.org
목차 |
소개
ChartZoomer는 Chart컨포넌트에 있는 annotationElements속성 내부에 들어가는 컨포넌트다. ChartZoomer의 내부 구조는 HDividedBox를 확장하여 만들어졌다. ChartZoomer를 생성하는데 있어서 navigateChart나 chartData가 없으면 이를 확인하여 ErrorBox를 띄우므로 반드시 값을 부여한다.
속성
navigateChart 네비게이트를 해야하는 Chart를 지정한다. 이 속성은 필수조건이므로 반드시 값을 넣어야만 한다.
chartData 네비게이트를 하는 Chart 내부 데이터를 지정한다. 이 속성은 필수조건이므로 반드시 값을 넣어야만 하며 데이터형은 ArrayCollection이다.
dividerChange 내부의 Divider를 제어하면 실시간으로 발생하는 이벤트다. ChartZoomerEvent이벤트로 divider의 영역을 leftValue, rightValue 두개를 반환하여 provide 되어있는 ArrayCollection의 값중 어디서부터 어디까지의 데이터를 보고 있는 확인할 수 있다.
사용법
간단한 사용법은 다음과 같다.
<mx:AreaChart id="myChart2"
dataProvider="{expenses}"
showDataTips="false"
width="100%" height="20%">
<mx:verticalAxis>
<mx:LinearAxis maximum="1000" padding="0"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer
axis="{axis1}" showLine="false"
visible="false" includeInLayout="false"/>
</mx:verticalAxisRenderers>
<mx:horizontalAxis>
<mx:CategoryAxis
id="axis1"
dataProvider="{expenses}"
categoryField="Month" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer
axis="{axis1}" showLabels="false" visible="false"
includeInLayout="false">
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<mx:seriesFilters>
<mx:Array/>
</mx:seriesFilters>
<mx:series>
<mx:AreaSeries
yField="Profit"
displayName="Profit"/>
</mx:series>
<mx:annotationElements>
<chart:ChartZoomer
id="zoomInControl"
navigateChart="{myChart2}" chartData="{expenses}" dividerChange="dividerChangeHandler(event);" />
</mx:annotationElements>
</mx:AreaChart>
초기값을 바꾸기 위해서는 leftValue와 rightValue의 값을 제어해 주면 된다.
<mx:AreaChart id="myChart2"
dataProvider="{expenses}"
showDataTips="false"
width="100%" height="20%">
<mx:verticalAxis>
<mx:LinearAxis maximum="1000" padding="0"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer
axis="{axis1}" showLine="false"
visible="false" includeInLayout="false"/>
</mx:verticalAxisRenderers>
<mx:horizontalAxis>
<mx:CategoryAxis
id="axis1"
dataProvider="{expenses}"
categoryField="Month" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer
axis="{axis1}" showLabels="false" visible="false"
includeInLayout="false">
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<mx:seriesFilters>
<mx:Array/>
</mx:seriesFilters>
<mx:series>
<mx:AreaSeries
yField="Profit"
displayName="Profit"/>
</mx:series>
<mx:annotationElements>
<chart:ChartZoomer
id="zoomInControl"
navigateChart="{myChart2}" rightValue="10" leftValue="20"
chartData="{expenses}"
dividerChange="dividerChangeHandler(event);" />
</mx:annotationElements>
</mx:AreaChart>
어플리케이션 예제
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:chart="org.openzet.charts.chartClasses.*"
backgroundColor="0xFFFFFF"
paddingTop="5"
paddingRight="5"
paddingLeft="5"
paddingBottom="5"
creationComplete="creationCompleteHandler();"
initialize="initializeHandler();">
<mx:Script>
<![CDATA[
//-------------------------------------------------------------------------------
//
// Imports
//
//-------------------------------------------------------------------------------
import mx.collections.ArrayCollection;
import org.openzet.events.ChartZoomerEvent;
//-------------------------------------------------------------------------------
//
// Initialize
//
//-------------------------------------------------------------------------------
/**
* @private
*
* initializeHandler
*/
private function initializeHandler():void
{
}
/**
* @private
*
* creationCompleteHandler
*/
private function creationCompleteHandler():void
{
setRandomData();
}
//-------------------------------------------------------------------------------
//
// Variables
//
//-------------------------------------------------------------------------------
[Bindable]
private var expenses:ArrayCollection = new ArrayCollection();
[Bindable]
private var newData:ArrayCollection = new ArrayCollection();
//-------------------------------------------------------------------------------
//
// Methods
//
//-------------------------------------------------------------------------------
/**
* @parivate
*
* setRandomData
* 임시 데이터 생성 메서드
*/
private function setRandomData():void
{
var tempAC:ArrayCollection = new ArrayCollection();
expenses = new ArrayCollection();
var i:int;
var n:int = 500;
for (i = 0; i < n; i++)
{
tempAC.addItem({Month: Math.floor(Math.random() * (12 - 1 + 1)) + 1,
Profit: Math.floor(Math.random() * (500 - 300 + 1)) + 300,
Expenses: Math.floor(Math.random() * (500 - 300 + 1)) + 300});
}
expenses = tempAC;
//zoomInControl.chartData = expenses;
}
//-------------------------------------------------------------------------------
//
// EventHandler
//
//-------------------------------------------------------------------------------
private function dividerChangeHandler(event:ChartZoomerEvent):void
{
newData.source = expenses.source.slice(event.leftValue, event.rightValue);
}
]]>
</mx:Script>
<mx:Button label="set Data" click="setRandomData();" />
<mx:AreaChart id="myChart"
dataProvider="{newData}"
showDataTips="true"
width="100%" height="100%">
<mx:verticalAxis>
<mx:LinearAxis />
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer
axis="{axis0}" visible="false" />
</mx:verticalAxisRenderers>
<mx:horizontalAxis>
<mx:CategoryAxis
id="axis0"
dataProvider="{newData}"
categoryField="Month" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer
axis="{axis0}" showLabels="false" visible="false"
includeInLayout="false">
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<mx:seriesFilters>
<mx:Array/>
</mx:seriesFilters>
<mx:series>
<mx:AreaSeries
yField="Profit"
displayName="Profit"/>
</mx:series>
</mx:AreaChart>
<mx:AreaChart id="myChart2"
dataProvider="{expenses}"
showDataTips="false"
width="100%" height="20%">
<mx:verticalAxis>
<mx:LinearAxis maximum="1000" padding="0"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer
axis="{axis1}" showLine="false"
visible="false" includeInLayout="false"/>
</mx:verticalAxisRenderers>
<mx:horizontalAxis>
<mx:CategoryAxis
id="axis1"
dataProvider="{expenses}"
categoryField="Month" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer
axis="{axis1}" showLabels="false" visible="false"
includeInLayout="false">
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<mx:seriesFilters>
<mx:Array/>
</mx:seriesFilters>
<mx:series>
<mx:AreaSeries
yField="Profit"
displayName="Profit"/>
</mx:series>
<mx:annotationElements>
<chart:ChartZoomer
id="zoomInControl"
navigateChart="{myChart2}" chartData="{expenses}" dividerChange="dividerChangeHandler(event);" />
</mx:annotationElements>
</mx:AreaChart>
</mx:Application>
