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


           从前面的文章知道,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为模板显示的图为:

           

        

         

    高度决定视野,角度改变观念,尺度把握人生。
  • 相关阅读:
    cssReset
    CSS的一些小技巧
    前端图标神器
    单例模式
    CSS 控制Html页面高度导致抖动问题的原因
    PHP中include()与require()的区别说明
    extends和implements区别
    静态,抽象类、接口、类库
    jQuery轮播图(手动点击轮播)
    jQuery实现大图轮播
  • 原文地址:https://www.cnblogs.com/liujian21st/p/2970833.html
Copyright © 2020-2023  润新知