博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

FusionChart的数据:XML(一) 单列图的数据结构

Posted on 2013-03-20 11:36  言冰的夏虫  阅读(324)  评论(0编辑  收藏  举报

       从前面的文章知道,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:鼠标移到该节点渲染后的图上时,提示的信息。也可以 不指定,系统此时会将labelvalue的值组合在一起;

             link:这个属性比较重要,指当鼠标点击对应的图表时,链接的内容,可以是jsp也可以是一个Action等。

            showLabel:这个属性是在X轴上是否显示label的值,0表示不显示,1表示显示。

       上面的数据以Column3D.swf为模板显示的图为: