BaseElement
Openzet.org
목차 |
소개
BaseElement클래스는 Chart의 데이터를 지정된 영역만큼의 데이터를 추출하는 컨포넌트 클래스다. property maxDataNum과 fieldName을 통해 마우스 위치에 따라 데이터를 추출해 낸다.
추출해 낸 데이터는 BaseElement컴포넌트의 selectData로 접근하여 받을 수 있다.
속성
maxDataNum 해당 차트에서 추출해낼 데이터 갯수.
fieldName 해당 차트의 categoryField명
selectData maxDataNum의 갯수만큼 추출한 데이터.
사용법
기본적인 사용법은 mx.charts.Legend와 같다.
targetChart 속성에 타겟이 될 차트를 넣어주면 된다.
일단 사용되기 시작하면 TextInput ComboBox가 나오고 이 컨포넌트와 연결된 Chart의 Series를 클릭하면 TextInput 에 해당하는 Series의 displayName이 나오게 된다.
그럼 선택이 된 Series를 어떤 Series형태로 바꿀지 ComboBox에서 찾고 그 옆의 버튼을 클릭하면 된다.
해당차트의 annotationElements에 추가한다.
maxDataNum 속성에 추출할 데이터의 갯수를 입력한다.
fieldName 속성에 해당 차트의 categoryField를 입력한다.
해당차트를 클릭하면 데이터를 추출할 마우스위치에 따른 영역이 표시된다.
표시된 영역에 들어오는 데이터를 BaseElement의 selectData 속성에 자동 저장된다.
다른 차트에서 BaseElement의 selectData를 참조한다.
<mx:CandlestickChart id="candlestickchart"
width="100%" height="100%"
showDataTips="true" dataProvider="{expensesAC}">
<mx:annotationElements>
<chartClasses:BaseElement id="candlestickBaseElement" width="100%" height="100%"
maxDataNum="9" fieldName="Date" />
</mx:annotationElements>
<mx:verticalAxis>
<mx:LinearAxis id="vaxis1" baseAtZero="false" />
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis id="haxis1" categoryField="Date" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{haxis1}" canDropLabels="true" />
</mx:horizontalAxisRenderers>
<mx:series>
<mx:CandlestickSeries openField="Open" highField="High" lowField="Low" closeField="Close"
fill="{up}" declineFill="{down}" stroke="{wick}" boxStroke="{box}" />
</mx:series>
</mx:CandlestickChart>
어플리케이션 예제
<?xml version="1.0"?>
<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
<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 medalsAC:ArrayCollection = new ArrayCollection( [
{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "China", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "Korea", Gold: 52, Silver:31, Bronze: 39 },
{ Country: "a", Gold: 25, Silver:21, Bronze: 35 },
{ Country: "e", Gold: 45, Silver:43, Bronze: 12 },
{ Country: "w", Gold: 34, Silver:42, Bronze: 52 },
{ Country: "qw", Gold: 57, Silver:31, Bronze: 21 },
{ Country: "Japan", Gold: 22, Silver:21, Bronze: 21 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection( [
{ Date: "25-Jul", Open: 40.75, High: 40.75, Low: 40.24, Close:40.31},
{ Date: "26-Jul", Open: 39.98, High: 40.78, Low: 39.97, Close:40.34},
{ Date: "27-Jul", Open: 40.38, High: 40.66, Low: 40, Close:40.63},
{ Date: "28-Jul", Open: 40.49, High: 40.99, Low: 40.3, Close:40.98},
{ Date: "29-Jul", Open: 40.13, High: 40.4, Low: 39.65, Close:39.95},
{ Date: "1-Aug", Open: 39.00, High: 39.50, Low: 38.7, Close:38.6},
{ Date: "2-Aug", Open: 38.68, High: 39.34, Low: 37.75, Close:38.84},
{ Date: "3-Aug", Open: 38.76, High: 38.76, Low: 38.03, Close:38.12},
{ Date: "4-Aug", Open: 37.98, High: 37.98, Low: 36.56, Close:36.69},
{ Date: "5-Aug", Open: 36.61, High: 37, Low: 36.48, Close:36.86} ]);
]]>
</mx:Script>
<!-- Define custom colors for use as fills. -->
<mx:SolidColor id="sc1" color="yellow" alpha=".8" />
<mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6" />
<mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6" />
<!-- Define custom Strokes for the columns. -->
<mx:Stroke id="s1" color="yellow" weight="2" />
<mx:Stroke id="s2" color="0xCCCCCC" weight="2" />
<mx:Stroke id="s3" color="0xFFCC66" weight="2" />
<!-- Define custom colors for the candles. -->
<mx:SolidColor id="up" color="green" alpha=".8" />
<mx:SolidColor id="down" color="red" alpha=".8" />
<!-- Define custom Stroke for the candle wick. -->
<mx:Stroke id="wick" color="black" weight="2" />
<!-- Define custom Stroke for the candle box. -->
<mx:Stroke id="box" color="black" weight="1" />
<mx:Panel title="Magnifying glass Example"
height="100%" width="100%" layout="vertical">
<mx:HBox width="100%" height="100%">
<mx:LineChart id="column"
width="100%" height="100%"
showDataTips="true"
dataProvider="{medalsAC}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Country" />
</mx:horizontalAxis>
<mx:annotationElements>
<chartClasses:BaseElement id="lineBaseElement" width="100%" height="100%"
maxDataNum="4" fieldName="Country" />
</mx:annotationElements>
<mx:series>
<mx:LineSeries xField="Country" yField="Gold"
displayName="Gold" fill="{sc1}" stroke="{s1}" />
<mx:LineSeries xField="Country" yField="Silver"
displayName="Silver" fill="{sc2}" stroke="{s2}" />
<mx:LineSeries xField="Country" yField="Bronze"
displayName="Bronze" fill="{sc3}" stroke="{s3}" />
</mx:series>
</mx:LineChart>
<mx:LineChart id="detailLineChart"
width="100%" height="100%"
showDataTips="true"
dataProvider="{lineBaseElement.selectData}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Country" />
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries xField="Country" yField="Gold"
displayName="Gold" fill="{sc1}" stroke="{s1}" />
<mx:LineSeries xField="Country" yField="Silver"
displayName="Silver" fill="{sc2}" stroke="{s2}" />
<mx:LineSeries xField="Country" yField="Bronze"
displayName="Bronze" fill="{sc3}" stroke="{s3}" />
</mx:series>
</mx:LineChart>
</mx:HBox>
<mx:HBox width="100%" height="100%">
<mx:CandlestickChart id="candlestickchart"
width="100%" height="100%"
showDataTips="true" dataProvider="{expensesAC}">
<mx:annotationElements>
<chartClasses:BaseElement id="candlestickBaseElement" width="100%" height="100%"
maxDataNum="9" fieldName="Date" />
</mx:annotationElements>
<mx:verticalAxis>
<mx:LinearAxis id="vaxis1" baseAtZero="false" />
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis id="haxis1" categoryField="Date" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{haxis1}" canDropLabels="true" />
</mx:horizontalAxisRenderers>
<mx:series>
<mx:CandlestickSeries openField="Open" highField="High" lowField="Low" closeField="Close"
fill="{up}" declineFill="{down}" stroke="{wick}" boxStroke="{box}" />
</mx:series>
</mx:CandlestickChart>
<mx:CandlestickChart id="detailcandlestickchart"
width="100%" height="100%"
showDataTips="true"
dataProvider="{candlestickBaseElement.selectData}">
<mx:verticalAxis>
<mx:LinearAxis id="vaxis2" baseAtZero="false" />
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis id="haxis2" categoryField="Date" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{haxis2}" canDropLabels="true" />
</mx:horizontalAxisRenderers>
<mx:series>
<mx:CandlestickSeries openField="Open" highField="High" lowField="Low" closeField="Close"
fill="{up}" declineFill="{down}" stroke="{wick}" boxStroke="{box}" />
</mx:series>
</mx:CandlestickChart>
</mx:HBox>
</mx:Panel>
</mx:Application>
