FLEX4 Linechart implementation of line graph, area chart style example

1, the following is the style of a line graph (Linechart)

(1) Graphics area Add background color, border.

(2) Horizontal, vertical grid drawn on the background.

(3) The polyline removes the shadow and adds the hollow dot.

<?xml version= "1.0"?>
<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"
Creationcomplete= "Init (event)" >
<fx:Script>
<! [cdata[
Import mx.collections.ArrayCollection;
Import mx.events.FlexEvent;

[bindable]
private var mydata:arraycollection = new ArrayCollection ([
{month: "18:00", value:20},
{month: "19:00", value:60},
{month: "20:00", value:215},
{month: "21:00", value:202},
{month: "22:00", value:190},
{month: "23:00", value:95}]);

protected function init (event:flexevent): void
{
Line1.setstyle ("Fill", 0xffffff); The origin of the inner fill color is white
Line1.setstyle ("radius", 5); The radius of the whole dot is 6.
}

]]>
</fx:Script>

<fx:Declarations>
<!--axis style (temporarily not required, to draw on the background)-->
<mx:solidcolorstroke id = "AxisS1" color= "0xe3e3e3" weight= "1" alpha= "0"/>
<!--line Style-->
<mx:solidcolorstroke id = "LineS1" color= "0x008eff" weight= "2"/>
<!--line point style (outer ring color with line color, outer line thickness 1)-->
<mx:solidcolorstroke id = "PointS1" color= "0x008eff" weight= "1"/>
</fx:Declarations>

<mx:linechart id= "Linechart" height= "60%" width= "60%" seriesfilters= "[]"
Verticalcenter= "0" horizontalcenter= "0" fontsize= "color=" 0x707070 "
Showdatatips= "true" dataprovider= "{myData}" >
<mx:backgroundElements>
<s:group width= "100%" height= "100%" >
<s:rect left= "0" right= "1" top= "0" bottom= "0" >
<s:fill>
<s:solidcolor alpha= "1" color= "#F5F5F5"/>
</s:fill>
<s:stroke>
<s:solidcolorstroke color= "0xe3e3e3" weight= "1"/>
</s:stroke>
</s:Rect>

</s:Group>
<mx:gridlines griddirection= "both" >
<mx:horizontalStroke>
<mx:solidcolorstroke color= "0xe3e3e3" weight= "1"/>
</mx:horizontalStroke>
<mx:verticalStroke>
<mx:solidcolorstroke color= "0xEAEAEA" weight= "1"/>
</mx:verticalStroke>
</mx:GridLines>

</mx:backgroundElements>
<mx:horizontalAxis>
<mx:categoryaxis id= "Haxis" categoryfield= "Month"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:axisrenderer axis= ' {haxis} ' tickplacement= ' None ' minortickplacement= ' None '
Axisstroke= "{axisS1}"/>
</mx:horizontalAxisRenderers>
<mx:verticalAxis>
<mx:linearaxis id= "Vaxis"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:axisrenderer axis= ' {vaxis} ' tickplacement= ' None ' minortickplacement= ' None '
Axisstroke= "{axisS1}"/>
</mx:verticalAxisRenderers>
<mx:series>
<mx:lineseries id= "line1" yfield= "Value" form= "segment" Displayname= "Quantity"
Itemrenderer= "Mx.charts.renderers.CircleItemRenderer"
Stroke= ' {pointS1} ' linestroke= ' {lineS1} '/>
</mx:series>
</mx:LineChart>
</s:Application>