[Chart] ColumnChart, BarChart
개발/FLEX & AIR2009. 11. 24. 11:32
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
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: 10, Silver:47, Bronze: 140 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
]]>
</mx:Script>
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: 10, Silver:47, Bronze: 140 },
{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
]]>
</mx:Script>
<!-- Define custom colors for use as fills. -->
<mx:SolidColor id="sc1" color="yellow" alpha=".5"/>
<mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".5"/>
<mx:SolidColor id="sc3" color="0xFFCC66" alpha=".5"/>
<mx:SolidColor id="sc1" color="yellow" alpha=".5"/>
<mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".5"/>
<mx:SolidColor id="sc3" color="0xFFCC66" alpha=".5"/>
<!-- Define custom Strokes for the columns. -->
<mx:Stroke id="s1" color="yellow" weight="1"/>
<mx:Stroke id="s2" color="0xCCCCCC" weight="1"/>
<mx:Stroke id="s3" color="0xFFCC66" weight="1"/>
<mx:Stroke id="s1" color="yellow" weight="1"/>
<mx:Stroke id="s2" color="0xCCCCCC" weight="1"/>
<mx:Stroke id="s3" color="0xFFCC66" weight="1"/>
<mx:Panel title="ColumnChart and BarChart Controls Example"
height="100%" width="400" layout="vertical">
<mx:ColumnChart id="column"
height="50%"
width="70%"
paddingLeft="5"
paddingRight="5"
showDataTips="true"
dataProvider="{medalsAC}"
>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Country"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
xField="Country"
yField="Gold"
displayName="Gold"
fill="{sc1}"
stroke="{s1}"
/>
<mx:ColumnSeries
xField="Country"
yField="Silver"
displayName="Silver"
fill="{sc2}"
stroke="{s2}"
/>
<mx:ColumnSeries
xField="Country"
yField="Bronze"
displayName="Bronze"
fill="{sc3}"
stroke="{s3}"
/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{column}"/>
<mx:BarChart id="bar" height="50%" width="70%"
paddingLeft="5" paddingRight="5"
showDataTips="true" dataProvider="{medalsAC}">
<mx:verticalAxis>
<mx:CategoryAxis categoryField="Country"/>
</mx:verticalAxis>
<mx:series>
<mx:BarSeries
yField="Country"
xField="Gold"
displayName="Gold"
fill="{sc1}"
stroke="{s1}"
/>
<mx:BarSeries
yField="Country"
xField="Silver"
displayName="Silver"
fill="{sc2}"
stroke="{s2}"
/>
<mx:BarSeries
yField="Country"
xField="Bronze"
displayName="Bronze"
fill="{sc3}"
stroke="{s3}"
/>
</mx:series>
</mx:BarChart>
<mx:Legend dataProvider="{bar}"/>
</mx:Panel>
</mx:Application>
height="100%" width="400" layout="vertical">
<mx:ColumnChart id="column"
height="50%"
width="70%"
paddingLeft="5"
paddingRight="5"
showDataTips="true"
dataProvider="{medalsAC}"
>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Country"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
xField="Country"
yField="Gold"
displayName="Gold"
fill="{sc1}"
stroke="{s1}"
/>
<mx:ColumnSeries
xField="Country"
yField="Silver"
displayName="Silver"
fill="{sc2}"
stroke="{s2}"
/>
<mx:ColumnSeries
xField="Country"
yField="Bronze"
displayName="Bronze"
fill="{sc3}"
stroke="{s3}"
/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{column}"/>
<mx:BarChart id="bar" height="50%" width="70%"
paddingLeft="5" paddingRight="5"
showDataTips="true" dataProvider="{medalsAC}">
<mx:verticalAxis>
<mx:CategoryAxis categoryField="Country"/>
</mx:verticalAxis>
<mx:series>
<mx:BarSeries
yField="Country"
xField="Gold"
displayName="Gold"
fill="{sc1}"
stroke="{s1}"
/>
<mx:BarSeries
yField="Country"
xField="Silver"
displayName="Silver"
fill="{sc2}"
stroke="{s2}"
/>
<mx:BarSeries
yField="Country"
xField="Bronze"
displayName="Bronze"
fill="{sc3}"
stroke="{s3}"
/>
</mx:series>
</mx:BarChart>
<mx:Legend dataProvider="{bar}"/>
</mx:Panel>
</mx:Application>
'개발 > FLEX & AIR' 카테고리의 다른 글
[Flex] PieChart (0) | 2009.11.24 |
---|---|
[Flex] LineChart (0) | 2009.11.24 |
[FLEX] HTTPService를 사용하여 파라미터 전송하기 (0) | 2009.10.25 |
[FLEX] HTTPService 서비스 사용하기 - 데이터그리드 결과값 바인딩 (0) | 2009.10.25 |
crossdomain.xml (0) | 2009.10.25 |