ChartControlPanel

Openzet.org

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

소개

차트의 Series속성을 변경할 수 있게하는 컨포넌트다. 타겟이 되는 Chart의 id 값을 받아 Chart 컨포넌트에 접근하여 Series의 Class를 변경한다.
기본적으로 PolarChart계열인 PieChart는 Series를 변경할 수 없고 CartesianChart의 Series를 변형하게끔 만들어졌다.

속성

selectedSeries 현제 선택된 Series를 저장한다.

seriesStatusWidth 선택된 Series를 표시해주는 TextInput의 넓이를 제어한다.

settingButtonLabel 셋팅버튼의 label 값이다.

사용법

기본적인 사용법은 mx.charts.Legend와 같다.
targetChart 속성에 타겟이 될 차트를 넣어주면 된다.
일단 사용되기 시작하면 TextInput과 ComboBox가 나오고 이 컨포넌트와 연결된 Chart의 Series를 클릭하면 TextInput에 해당하는 Series의 displayName이 나오게 된다.
그럼 선택이 된 Series를 어떤 Series형태로 바꿀지 ComboBox에서 찾고 그 옆의 버튼을 클릭하면 된다.

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

어플리케이션 예제

<?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 id="sampleChart" dataProvider="{sampleAC}" showSeriesBox="true">
    <chartClasses:series>
        <mx:ColumnSeries yField="data2" displayName="데이터 2" />
        <mx:LineSeries yField="data1" displayName="데이터 1" />
    </chartClasses:series>
</chartClasses:ZetCartesianChart>
<chartClasses:ChartControlPanel targetChart="{sampleChart}" settingButtonLabel="setting"/>
</mx:Application>