FusionCharts introduces styles to the charts. Style lends a simple mechanism using which you can easily control the visual layout of charts. For each defined object on a chart, you can apply one or more styles like animation bevel, blur, font, shadow and glow. Let's see how we can accomplish this using FusionCharts for Flex. |
|
|
You can opt to define and apply styles in the chart XML itself. We show below an example of a Column 3D chart with 2 styles, FONT and GLOW applied to CAPTION, XAXISNAME and YAXISNAME objects of the chart. |
|
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusioncharts.components.*">
<ns1:FusionCharts x="10" y="10" FCChartType="Column3D" FCDataXML="{xmlData}"/>
<mx:Script>
<![CDATA[
[Bindable]
private var xmlData:String="<chart caption='Weekly Sales' xAxisName='Week' yAxisName='Revenue' " +
" numberPrefix='$' >" +
" <set value='40800' label='Week 1' />" +
" <set value='31400' label='Week 2' />" +
" <set value='26700' label='Week 3' />" +
" <set value='54400' label='Week 4' />" +
" <styles>" +
" <definition>" +
" <style name='MyFirstFontStyle' type='font' font='Verdana' " +
" size='12' color='FF0000' bgColor='FFFFDD' borderColor='666666' />" +
" <style name='MyFirstGlow' type='Glow' color='FF5904' alpha='75' />" +
" </definition>" +
" <application>" +
" <apply toObject='CAPTION' styles='MyFirstFontStyle'/>" +
" <apply toObject='XAXISNAME' styles='MyFirstGlow,MyFirstFontStyle' />" +
" <apply toObject='YAXISNAME' styles='MyFirstGlow' />" +
" </application>" +
" </styles>" +
"</chart>";
]]>
</mx:Script>
</mx:Application>
|
|
Please refer to "Internal XML Structure" section for more on XML Structure of various chart types. Also refer to "FusionCharts Styles XML " section for more on Styles. |
|
The above XML would render a chart as shown in the image below: |
|
 |
|
Handlin Styles using Array, XMLList or Model object |
FusionCharts for Flex allows developers to store the Style definitions and application in Array, XMList or Model object. You can apply style by binding the object to FCStyles attribute of FCChartData class. |
|
Let us find out with the excerpt from an example, shown below, how this can be done using ArrrayCollection: |
|
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusioncharts.components.*">
<ns1:FusionCharts x="10" y="10" FCChartType="Column2D" FCDataXML="{xmlData}" FCStyles="{chartStyle}" FCParams="{chartParams}"/>
<mx:Script>
<![CDATA[
...
[Bindable]
private var chartStyles:ArrayCollection=new ArrayCollection([
{name:"MyFirstFontStyle",type:"font",font:"Verdana",size:"12",color:"FF0000",
bgColor:"FFFFDD",borderColor:"666666"},
{name:"MyFirstGlow",type:"Glow",color:"FF5904",alpha:"75"},
{toObject:"CAPTION",styles:"MyFirstFontStyle"},
{toObject:"XAXISNAME",styles:"MyFirstGlow,MyFirstFontStyle"},
{toObject:"YAXISNAME",styles:"MyFirstGlow"}
]);
]]>
</mx:Script>
</mx:Application>
|
|
As you can see above, we create an ArrayCollection object named as chartStyles. We define and apply the styles in the object. Now, we bind this object to the FCStyles attribute of FCChartData class. The resultant chart would be the same as shown in the image above. |
|
Let us go through the equivalent example using XMLList: |
|
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusioncharts.components.*">
<ns1:FusionCharts x="10" y="10" FCChartType="Column2D" FCDataXML="{chartData.data[0]}" FCStyles="{chartStyles.styles[0]}" FCParams="{chartParams.param[0]}"/>
<mx:Script>
<![CDATA[
...
[Bindable]
private var chartStyles:XML=
<main>
<styles>
<definition>
<def name='MyFirstFontStyle' type='font'
font='Verdana' size='12' color='FF0000'
bgColor='FFFFDD' borderColor='666666'/>
<def name='MyFirstGlow' type='Glow' color='FF5904' alpha='75'/>
</definition>
<application>
<app toObject='CAPTION' styles='MyFirstFontStyle'/>
<app toObject='XAXISNAME' styles='MyFirstGlow,MyFirstFontStyle'/>
<app toObject='YAXISNAME' styles='MyFirstGlow'/>
</application>
</styles>
</main>;
]]>
</mx:Script>
</mx:Application>
|
|
Below is the example using Model: |
|
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusioncharts.components.*">
<ns1:FusionCharts x="10" y="10" FCChartType="Column2D" FCDataXML="{chartData.data}" FCStyles="{chartStyles.styles}" FCParams="{chartParams.param}"/>
...
<mx:Model id="chartStyles">
<chart>
<styles>
<definition>
<name>MyFirstFontStyle</name>
<type>font</type>
<font>Verdana</font>
<size>12</size>
<color>FF0000</color>
<bgColor>FFFFDD</bgColor>
<borderColor>666666</borderColor>
</definition>
<definition>
<name>MyFirstGlow</name>
<types>Glow</types>
<color>FF5904</color>
<alpha>75</alpha>
</definition>
<application>
<toObject>CAPTION</toObject>
<styles>MyFirstFontStyle</styles>
</application>
<application>
<toObject>XAXISNAME</toObject>
<styles>MyFirstGlow,MyFirstFontStyle</styles>
</application>
<application>
<toObject>YAXISNAME</toObject>
<styles>MyFirstGlow</styles>
</application>
</styles>
</chart>
</mx:Model>
</mx:Application> |