FusionCharts introduces styles to the charts/widgets. Style lends a simple mechanism using which you can easily control the visual layout of charts/widgets. For each defined object on a chart/widget, 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/widget XML itself or through other data-types supported by FusionCharts for Flex. We have shown below an example of a Column 3D chart with 2 styles, where 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 information on XML Structure of various chart types. Also refer to 'FusionCharts Styles XML' section to get more information on Styles. |
|
The above XML would render a chart as shown in the image below: |
|
 |
|
Handling 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 similar to the above image. |
|
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> |