1, page switching
Copy Code code as follows:
<?xml version= "1.0" encoding= "Utf-8"?>
<s:application xmlns:fx= "http://ns.adobe.com/mxml/2009"
Xmlns:s= "Library://ns.adobe.com/flex/spark"
xmlns:mx= "Library://ns.adobe.com/flex/mx"
Width= "100%" height= "100%" >
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!--place non-visual elements (such as services, value objects) here-->
</fx:Declarations>
<fx:Script>
<! [cdata[
Import mx.collections.ArrayCollection;
/**
* Data source bindings for graphs
*/
[bindable]
private var chartarray:arraycollection = new ArrayCollection ([
{Week: "Monday", Apple: "451245", Orange: "894544", Peach: "451245"},
{Week: "Tuesday", Apple: "985444", Orange: "745445", Peach: "989565"},
{Week: "Wednesday", Apple: "124544", Orange: "323565", Peach: "323121"},
{Week: "Thursday", Apple: "895645", Orange: "201212", Peach: "542121"},
{Week: "Friday", Apple: "325645", Orange: "564545", Peach: "656454"},
{Week: "Saturday", Apple: "564512", Orange: "784545", Peach: "845455"},
{Week: "Sunday", Apple: "784545", Orange: "656232", Peach: "124545"}
]);
/**
* RadioButton Click event
*/
protected function ClickHandler (event:event): void
{
if (radio_column.enabled)
{
Column.height = 450;
line.height = 0;
}
else if (radio_line.enabled)
{
column.height = 0;
Line.height = 450;
}
}
]]>
</fx:Script>
<mx:vbox id= "VBox" width= "100%" height= "100%" >
<mx:vbox id= "Column_chart" width= "100%" height= "80%" paddingleft= "ten" paddingright= "10"
Paddingtop= "Ten" >
<mx:columnchart id= "column" showdatatips= "true" dataprovider= "{Chartarray}" width= "100%" height= "450" >
<mx:horizontalAxis>
<mx:categoryaxis categoryfield= "Week" displayname= "Week"/>
</mx:horizontalAxis>
<mx:series>
<mx:columnseries displayname= "Apple" xfield= "Week" yfield= "Apple"/>
<mx:columnseries displayname= "Orange" xfield= "Week" yfield= "Orange"/>
<mx:columnseries displayname= "Peach" xfield= "Week" yfield= "Peach"/>
</mx:series>
</mx:ColumnChart>
<mx:legend dataprovider= "{column}"/>
</mx:VBox>
<mx:vbox id= "Line_chart" width= "100%" height= "0" paddingleft= "ten" paddingright= "10"
Paddingtop= "Ten" >
<mx:linechart id= "line" showdatatips= "true" dataprovider= "{Chartarray}" width= "100%" height= "100%" >
<mx:horizontalAxis>
<mx:categoryaxis categoryfield= "Week" displayname= "Week"/>
</mx:horizontalAxis>
<mx:series>
<mx:lineseries displayname= "Apple" xfield= "Week" yfield= "Apple"/>
<mx:lineseries displayname= "Orange" xfield= "Week" yfield= "Orange"/>
<mx:lineseries displayname= "Peach" xfield= "Week" yfield= "Peach"/>
</mx:series>
</mx:LineChart>
<mx:legend dataprovider= "{line}"/>
</mx:VBox>
<mx:hbox width= "100%" height= ">"
<mx:radiobutton id= "Radio_column" name= "chart" label= "column chart" click= "ClickHandler" (event)/>
<mx:radiobutton id= "Radio_line" name= "chart" label= "line chart" change= "ClickHandler" (event)/>
</mx:HBox>
</mx:VBox>
</s:Application>
2, page results