FusionCharts使用XML来创建和控制图形。
7.1数据类型
在FCF里,一共有四种数据类型。
Boolean - 它的值为0或1,1表示true,0表示false。例如<graph showNames='1' >。
Number - 它的值应该是一个数值。例如<graph yAxisMaxValue='200' > 。
String - 它的值是一个字符串。例如<graph caption='My Chart' > 。
Hex Color Code - 它表示一个16进制的颜色,不需要用“#”。例如<graph bgColor='FFFFDD' >。
每个图形都有很多属性,我们都可以通过XML对它进行设置,但是,我们并不需要对每一个属性都进行设置,因为它们都有一个默认值,如果我们没有设置,FCF会使用默认值来替代。
FCF里有几种类型的XML结构:
7.2单系列图形
单系列图形是指只有一个数据集的图形。例如,我们的第一个例子,每月销售情况 ,就是一个单系列图形(我们只有一年的数据)。我们并没有对数据进行比较,例如,比较两年的每月销售情况。
我们看看下面的例子。
1.
<graph caption='Business Results 2006' xAxisName='Month' yAxisName='Revenue' showValues='0'
2.
numberPrefix='$' decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70' showColumnShadow='1'
3.
divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1' alternateHGridColor='f8f8f8'
4.
alternateHGridAlpha='60' >
5.
<set name='Jan' value='27400' color='AFD8F8'/>
6.
<set name='Feb' value='29800' color='F6BD0F' />
7.
<set name='Mar' value='25800' color='8BBA00'/>
8.
<set name='Apr' value='26800' color='FF8E46'/>
9.
<set name='May' value='29600' color='008E8E' />
10.
<set name='Jun' value='32600' color='D64646'/>
11.
<set name='Jul' value='31800' color='8E468E'/>
12.
<set name='Aug' value='36700' color='588526'/>
13.
<set name='Sep' value='29700' color='B3AA00'/>
14.
<set name='Oct' value='31900' color='008ED6'/>
15.
<set name='Nov' value='34800' color='9D080D'/>
16.
<set name='Dec' value='24800' color='A186BE' />
17.
18.
<trendlines>
19.
<line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/>
20.
</trendlines>
21.
22.
</graph>
上面的代码里多了一些我们没接触过的属性,没关系,在图形XML参考一章我们将详细介绍所有的图形可用的属性。
下面进行一下简单的解释
<graph>元素是所有FCF XML文档的主元素。它描述数据的开始和结束。它还有一些属性可以控制图形。这些属性我们在图形XML参考一章会讲到。
<set>元素是<graph>的子元素,它描述一个数据集,这个数据集决定了图形上的数据。一个典型的<set>元素看起来就像这样:
1.
<set name='Jan' value='27400' color='AFD8F8' hoverText="January, 17400" link="details.asp?month=jan" showName="1"/>
<trendLines> 元素,它可以在图形上画出一条趋势线。例如,下面的代码里,我们在26000这个值画出了一条线,用来表示月平均销售额。
1.
<line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/>
7.3多系列图形
多系列图形被用来比较两个或更多的数据集。
我们看看下面的代码。
<?xml version="1.0" encoding="UTF-8"?>
<graph caption='Business Results 2005 v 2006' PYAxisName='Revenue'
SYAxisName='Quantity' xAxisName='Month' showValues='0'
decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70' showColumnShadow='1'
divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1'
alternateHGridColor='f8f8f8' alternateHGridAlpha='60' SYAxisMaxValue='750'>
<categories>
<category name='Jan' />
<category name='Feb' />
<category name='Mar' />
<category name='Apr' />
<category name='May' />
<category name='Jun' />
<category name='Jul' />
<category name='Aug' />
<category name='Sep' />
<category name='Oct' />
<category name='Nov' />
<category name='Dec' />
</categories>
<dataset seriesName='2006' parentYAxis='P' color='c4e3f7'
numberPrefix='$'>
<set value='27400' />
<set value='29800' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>
<dataset seriesName='2005' parentYAxis='P' color='Fad35e'
numberPrefix='$'>
<set value='10000' />
<set value='11500' />
<set value='12500' />
<set value='15000' />
<set value='11000' />
<set value='9800' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>
<dataset seriesName='Total Quantity' parentYAxis='S' color='8BBA00'
anchorSides='10' anchorRadius='3' anchorBorderColor='009900'>
<set value='270' />
<set value='320' />
<set value='290' />
<set value='320' />
<set value='310' />
<set value='320' />
<set value='340' />
<set value='470' />
<set value='420' />
<set value='440' />
<set value='480 ' />
<set value='360' />
</dataset>
</graph>
我们发现,上面多了一个 <categories>元素,它包含很多的子元素,如
1.
<category name='Jan' />
每个<category>就表示X轴上的一个名称。
上面还有两个<dataset>元素,一个用来表示2006年的数据,一个表示2005年。每个<set>则表示图形上的一个数据。
注意<categories>的子元素的数量应该和<dataset>子元素的一致。
8.1什么是组合图形
当我们想在一张图形里表示多个图形类型时,我们就要用到组合图。FCF提供了双Y轴组合图,它有两个Y轴,每个轴表示不同的刻度(例如,收益和数量,或者访问量和下载量等等。)。图形左边的坐标轴叫主坐标轴,图形右边的叫次坐标轴。
FCF里组合图分为2D和3D,下面的图形就是一个2D双Y轴组合图。
这个图里有月销售额和数量,X轴表示月份。现在我们来看看这两个Y轴:
主Y轴表示2005和2006的销售额,柱状图和这个主Y轴对应。
次Y轴表示数量,曲线图和次Y轴对应。
在双Y轴图形里,我们必须提供至少两个数据集,一个对应主Y轴,一个对应次Y轴。如果你没有提供两个,图形就不会正确显示。
8.2代码
上图的XML代码如下:
<set value='27400' /><set value='29800' /><set value='25800' /><set value='26800' /><set value='29600' /><set value='32600' /><set value='31800' /><set value='36700' /><set value='29700' /><set value='31900' /><set value='34800' /><set value='24800' /></dataset><dataset seriesName='2005' parentYAxis='P' color='Fad35e' numberPrefix='><set value='10000' /><set value='11500' /><set value='12500' /><set value='15000' /><set value='11000' /><set value='9800' /><set value='11800' /><set value='19700' /><set value='21700' /><set value='21900' /><set value='22900' /><set value='20800' /></dataset><dataset seriesName='Total Quantity' parentYAxis='S' color='8BBA00'anchorSides='10' anchorRadius='3' anchorBorderColor='009900'><set value='270' /><set value='320' /><set value='290' /><set value='320' /><set value='310' /><set value='320' /><set value='340' /><set value='470' /><set value='420' /><set value='440' /><set value='480 ' /><set value='360' /></dataset></graph><?xml version="1.0" encoding="UTF-8"?> <graph caption='Business Results 2005 v 2006' PYAxisName='Revenue' SYAxisName='Quantity' xAxisName='Month' showValues='0' decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70' showColumnShadow='1' divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1' alternateHGridColor='f8f8f8' alternateHGridAlpha='60' SYAxisMaxValue='750'> <categories> <category name='Jan' /> <category name='Feb' /> <category name='Mar' /> <category name='Apr' /> <category name='May' /> <category name='Jun' /> <category name='Jul' /> <category name='Aug' /> <category name='Sep' /> <category name='Oct' /> <category name='Nov' /> <category name='Dec' /> </categories> <dataset seriesName='2006' parentYAxis='P' color='c4e3f7' numberPrefix='>
8.3简单解释
这个组合图的XML和一个多系列图形的XML较为类似,因此,我们只解释以下不同的地方。
在双Y轴组合图里,有两个Y轴,每个Y轴都可以有它自己的刻度和数值格式属性。
PYAxisName表示主轴的名称,SYAxisName表示次轴的名称。
在每个数据集里,我们都必须用parentYAxis属性来指定它是属于哪个轴。这个属性的值只能是“P”或“S”。P代表主轴,S代表次轴。例如我们的代码里,在主轴上有两个销售额数据集--“2005”和“2006”:
68.
<dataset seriesName='2006' parentYAxis='P' ... >
69.
70.
...
71.
72.
<dataset seriesName='2005' parentYAxis='P' ... >
在次轴上有一个数量数据集:
1.
<dataset seriesName='Total Quantity' parentYAxis='S' ... >
上面的例子里,数量数据集表示的是2005和2006当月数量的总数。实际上,我们可以在次轴上也设置两个数据集,一个表示2005年每月的数量,一个表示2006年的。大家可以自己练习一下。
8.4注意
在运行这个例子是,Flash文件应该使用FCF_MSColumn2DLineDY.swf,从上图我们可以看出,它是column和line的组合,因此要用FCF_MSColumn2DLineDY.swf。