ZetCartesianChart

Openzet.org

목차 1 소개 2 속성 3 사용법 4 어플리케이션 예제

소개

ZetCartesianChart는 CartesianChart를 확장해 개발된 Chart로 기본적인 기능은 같다.
Chart를 구성하고 있는 Series들의 visible 속성을 동적으로 동작하게끔 하여 원하는 Series만을 선택하여 볼 수 있게 한다.

속성

checkBoxHorizontalAlign SeriesBox의 정렬방식을 바꿔주는 property다. 기본값은 left이다.

checkBoxYPoint SeriesBox의 차트 내부의 y위치 값을 제어하는 프로퍼티다. 기본값은 0이다.

checkBoxHorizontalGap SeriesBox 내부의 CheckBox 사이의 갭을 만들어준다. 기본값은 5픽셀이다. 사용방법은 태그에 직접 써넣어주면 된다.

showMarker Marker의 보기 유무를 결정한다. 데이터 형은 Boolean이며 기본값은 true이다.

사용법

ZetCartesianChart의 dataProvider로 받는 정보는 기존 CartesianChart에 들어가는 값 그대로 ArrayCollection을 기본으로 받는다.
그리고 VisibleCheckBox에 있는 Text는 Series에 있는 displayName값을 받아 표시되게 된다.
showSeriesBox의 Boolean값을 조절하여 VisibleCheckBox를 보일지 안보일지에 대하여 결정하게 된다.

<chartClasses:ZetCartesianChart dataProvider="{sampleAC}" showSeriesBox="true">
    <chartClasses:series>
        <mx:ColumnSeries yField="data2" displayName="데이터 2" />
        <mx:LineSeries yField="data1" displayName="데이터 1" />
    </chartClasses:series>
</chartClasses:ZetCartesianChart>

checkBoxHorizontalAlign 속성을 사용하면 VisibleCheckBox의 가로위치를 결정하게 된다. "left", "center", "right"로 작동한다.

<chartClasses:ZetCartesianChart dataProvider="{sampleAC}" showSeriesBox="true" checkBoxHorizontalAlign ="center">
    <chartClasses:series>
        <mx:ColumnSeries yField="data2" displayName="데이터 2" />
        <mx:LineSeries yField="data1" displayName="데이터 1" />
    </chartClasses:series>
</chartClasses:ZetCartesianChart>

checkBoxYPoint 속성을 사용하면 VisibleCheckBox들의 Y위치를 조절한다.
이 속성의 데이터 형은 Number형식으로 받는다.

<chartClasses:ZetCartesianChart dataProvider="{sampleAC}" showSeriesBox="true" checkBoxYPoint="5">
    <chartClasses:series>
        <mx:ColumnSeries yField="data2" displayName="데이터 2" />
        <mx:LineSeries yField="data1" displayName="데이터 1" />
    </chartClasses:series>
</chartClasses:ZetCartesianChart>

어플리케이션 예제

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:chartClasses="org.openzet.charts.chartClasses.*">
<mx:Script>
    <![CDATA[
    import mx.collections.ArrayCollection;
 
    [Bindable]
    private var sampleAC:ArrayCollection = new ArrayCollection([
                                                                {index:1, data1:100, data2:200},
                                                                {index:2, data1:120, data2:300},
                                                                {index:3, data1:110, data2:210},
                                                                {index:4, data1:140, data2:220},
                                                                {index:5, data1:90, data2:210},
                                                                {index:6, data1:100, data2:240},
                                                                {index:7, data1:130, data2:210},
                                                                {index:8, data1:140, data2:200},
                                                                {index:9, data1:110, data2:180},
                                                                {index:10, data1:100, data2:220}]);
    ]]>
 
</mx:Script>
<chartClasses:ZetCartesianChart dataProvider="{sampleAC}" showSeriesBox="true">
    <chartClasses:series>
        <mx:ColumnSeries yField="data2" displayName="데이터 2" />
        <mx:LineSeries yField="data1" displayName="데이터 1" />
    </chartClasses:series>
</chartClasses:ZetCartesianChart>
</mx:Application>