从前面的文章知道,FusionChart支持2种结构类型的数据,一种是XML数据,一种是JSON类型的数据。每种结构数据下,又因为需要渲染图形的种类不同,其具体的数据
结构也有很大差别。这几张主要是介绍在XML数据结构的基础上,对FusionChart支持的数据进行简要的介绍。
首先是单列图的数据。FusionChart支持渲染的单列图有以下一些图形:Column 2D,Column 3D,Bar 2D,Line,Area 2D,Pie 2D,Pie 3D,Doughnut 2D,Doughnut
3D,Pareto 2D,Pareto 3D。这几种图形的数据结构是一样的,都是单列图,因此其具体的数据来源也是大同小异。其构成如下:
<?xml version="1.0" encoding="UTF-8"?> <chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'> <set label='January' value='17400' /> <set label='February' value='19800' /> <set label='March' value='21800' /> <set label='April' value='23800' /> <set label='May' value='29600' /> <set label='June' value='27600' /> <vLine color='FF5904' thickness='2'/> <set label='July' value='31800' /> <set label='August' value='39700' /> <set label='September' value='37800' /> <set label='October' value='21900' /> <set label='November' value='32900' /> <set label='December' value='39800' /> <trendlines> <line startValue='22000' color='00cc00' displayValue='Average' /> </trendlines> <styles> <definition> <style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' /> </definition> <application> <apply toObject='Canvas' styles='CanvasAnim' /> </application> </styles> </chart>
上面的XML数据,其父节点是<chart>。所有的FusionChart的XML数据都是以<chart>为父节点开始的。在父节点<chart>中,有一些常用的属性:
caption :图表的标题。主要是介绍该图表的是什么类型的图表。如本例中是:月度销售额。也可以是其它的。
subcaption :图表的子标题。附加的内容介绍。
xAxisName:X轴的名称,即X轴表示的是什么;
yAxisName: Y轴的名称,即Y轴表示的是什么。
numberPrefix:单位。表示显示的数据是以什么为单位的。
在<chart> 节点中,有一些子节点,这些子节点就是具体数据源。在本例中,其是:
<set label='January' value='17400' />
它是以<set>为开始的。<set> 节点主要有2个总要的属性, 一个是label属性,表示该数据是表示什么数据,这里是一月份的数据。label的值,可以随便写,只要其
有实际意义即可。另一个是value属性,表示本节点的值,该值是用来可计算的的值,因此一般是数字。其实<set>节点还有其它的一些属性:
color:图表渲染时,以什么颜色渲染。一般可以不指定,FusionChart会有自动的安排;
toolTip:鼠标移到该节点渲染后的图上时,提示的信息。也可以 不指定,系统此时会将label与value的值组合在一起;
link:这个属性比较重要,指当鼠标点击对应的图表时,链接的内容,可以是jsp也可以是一个Action等。
showLabel:这个属性是在X轴上是否显示label的值,0表示不显示,1表示显示。
上面的数据以Column3D.swf为模板显示的图为: