flex 28 차트

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:SolidColor id="sc" color="#ff0000" alpha=".3"/>
 <mx:Stroke id="s" color="#ff0000" weight="1"/>
 <mx:Stroke id="ws" color="#0000ff" weight="1"/>
 <mx:SolidColor id="wsc" color="#0000ff" alpha=".3"/>
 <mx:Stroke id="callouts" color="#828282" weight="1"/>
 <mx:Stroke id="radial" color="#828282" weight="1"/>
 
 <mx:Panel width="700" height="300" layout="absolute" horizontalCenter="0" verticalCenter="0" title="chartTest">
 
  <mx:TabBar dataProvider="viewstack1" horizontalCenter="-50" verticalCenter="-110">  
  </mx:TabBar>
  <mx:NumericStepper id="ns" horizontalCenter="280" verticalCenter="-110"/>
  
  <mx:ViewStack id="viewstack1" width="650" height="200" horizontalCenter="0" verticalCenter="20">
   <!--라인차트-->
   <mx:Canvas label="LineChart" width="100%" height="100%">
    <mx:LineChart id="line" width="100%" height="100%"  horizontalCenter="0" verticalCenter="0" dataProvider="{timeVisit}" showDataTips="true">
     <mx:horizontalAxis>
      <mx:CategoryAxis categoryField="t"/>
     </mx:horizontalAxis>
     <mx:series>
      <mx:LineSeries displayName="visit" yField="v" form="curve" lineStroke="{s}"/>
      <mx:LineSeries displayName="write" yField="w" form="curve" lineStroke="{ws}"/>
     </mx:series>
    </mx:LineChart>
    <mx:Legend dataProvider="{line}" verticalCenter="-60" horizontalCenter="-200"/>  
   </mx:Canvas>
   <!--컬럼차트-->
   <mx:Canvas label="ColumnChart" width="100%" height="100%">
    <mx:ColumnChart id="column" width="100%" height="100%" horizontalCenter="0" verticalCenter="0" dataProvider="{timeVisit}" showDataTips="true">
     <mx:horizontalAxis>
      <mx:CategoryAxis categoryField="t"/>
     </mx:horizontalAxis>
     <mx:series>
      <mx:ColumnSeries xField="t" displayName="visit" yField="v" stroke="{s}" fill="{sc}"/>
      <mx:ColumnSeries xField="t" displayName="write" yField="w" stroke="{ws}" fill="{wsc}"/>
     </mx:series>
    </mx:ColumnChart>
    <mx:Legend dataProvider="{column}" horizontalCenter="-200" verticalCenter="-60"/>  
   </mx:Canvas>
   <!--영역차트-->
   <mx:Canvas label="AreaChart" width="100%" height="100%">
    <mx:AreaChart id="area" width="100%" height="100%" horizontalCenter="0" verticalCenter="0" dataProvider="{timeVisit}" showDataTips="true">
     <mx:horizontalAxis>
      <mx:CategoryAxis categoryField="t"/>
     </mx:horizontalAxis>
     <mx:series>
      <mx:AreaSeries displayName="visit" yField="v" form="curve" areaStroke="{s}" areaFill="{sc}"/>
      <mx:AreaSeries displayName="write" yField="w" form="curve" areaStroke="{ws}" areaFill="{wsc}"/>
     </mx:series>
    </mx:AreaChart>
    <mx:Legend dataProvider="{area}" horizontalCenter="-200" verticalCenter="-60"/>  
   </mx:Canvas>
   <!--바차트-->
   <mx:Canvas label="BarChart" width="100%" height="100%">
    <mx:BarChart id="bar" width="100%" height="100%" horizontalCenter="0" verticalCenter="0" dataProvider="{timeVisit}" showDataTips="true">
     <mx:verticalAxis>
      <mx:CategoryAxis categoryField="t"/>
     </mx:verticalAxis>
     <mx:series>
      <mx:BarSeries displayName="visit" yField="t" xField="v" fill="{sc}" stroke="{s}"/>
      <mx:BarSeries displayName="write" yField="t" xField="w" fill="{wsc}" stroke="{ws}"/>
     </mx:series>
    </mx:BarChart>
    <mx:Legend dataProvider="{bar}" horizontalCenter="250" verticalCenter="0"/>  
   </mx:Canvas>
   <!--파이차트-->
   <mx:Canvas label="PieChart" width="100%" height="100%">
    <mx:PieChart id="pie" width="100%" height="100%" horizontalCenter="0" verticalCenter="0" dataProvider="{timeVisit}" showDataTips="true">
     <mx:series>
                  <mx:PieSeries nameField="t" labelPosition="callout" field="v" calloutStroke="{callouts}" radialStroke="{radial}" stroke="{s}"/>
                  <mx:PieSeries nameField="t" labelPosition="callout" field="w" calloutStroke="{callouts}" radialStroke="{radial}" stroke="{ws}"/>
              </mx:series>
             </mx:PieChart>
    <mx:Legend dataProvider="{pie}" horizontalCenter="220" verticalCenter="0" width="200" height="200"/>  
   </mx:Canvas>
   <!--플롯차트-->
   <mx:Canvas label="PlotChart" width="100%" height="100%">
    <mx:PlotChart id="plot" width="100%" height="100%" horizontalCenter="0" verticalCenter="0" dataProvider="{timeVisit}">
     <mx:series>
      <mx:PlotSeries displayName="visit" xField="v" yField="w" stroke="{s}" fill="{sc}"/>
      <mx:PlotSeries displayName="write" xField="w" yField="v" stroke="{ws}" fill="{wsc}"/>
     </mx:series>
    </mx:PlotChart>
    <mx:Legend dataProvider="{plot}" horizontalCenter="-100" verticalCenter="-60"/>  
   </mx:Canvas>  
  </mx:ViewStack>
 </mx:Panel>
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   [Bindable]
   private var timeVisit:ArrayCollection = new ArrayCollection([
   {t:"00:00", v:21, w:12}, {t:"02:00", v:17, w:10}, {t:"04:00", v:10, w:3},
   {t:"06:00", v:8, w:5}, {t:"08:00", v:13, w:7}, {t:"10:00", v:23, w:16},
   {t:"12:00", v:16, w:11}]);
  ]]>
 </mx:Script>
 
</mx:Application>