道长A的地盘

http://Java.Im 这个网址NB吧?是道长的新网站,您不去看看吗?
随笔 - 28, 文章 - 1, 评论 - 73, 引用 - 0
数据加载中……

[AJava原创]FusionCharts Free中文开发指南[使用文档教程]第七章--FusionCharts Free和XML

FusionCharts使用XML来创建和控制图形。

数据类型


在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结构:


单系列图形


单系列图形是指只有一个数据集的图形。例如,我们的第一个例子,每月销售情况 ,就是一个单系列图形(我们只有一年的数据)。我们并没有对数据进行比较,例如,比较两年的每月销售情况。
我们看看下面的例子。


图片1



 

<graph caption='Business Results 2006' xAxisName='Month' yAxisName='Revenue' showValues='0'   
numberPrefix='$' decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70' showColumnShadow='1'     
divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1' alternateHGridColor='f8f8f8'   
  
alternateHGridAlpha='60' >                
   
<set name='Jan' value='27400' color='AFD8F8'/>           
   
<set name='Feb' value='29800' color='F6BD0F' />           
   
<set name='Mar' value='25800' color='8BBA00'/>           
   
<set name='Apr' value='26800' color='FF8E46'/>           
   
<set name='May' value='29600' color='008E8E' />           
   
<set name='Jun' value='32600' color='D64646'/>           
   
<set name='Jul' value='31800' color='8E468E'/>           
   
<set name='Aug' value='36700' color='588526'/>           
   
<set name='Sep' value='29700' color='B3AA00'/>           
   
<set name='Oct' value='31900' color='008ED6'/>           
   
<set name='Nov' value='34800' color='9D080D'/>           
   
<set name='Dec' value='24800' color='A186BE' />           
           
 
<trendlines>           
   
<line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/>           
 
</trendlines>           
           
</graph>




上面的代码里多了一些我们没接触过的属性,没关系,在图形XML参考一章我们将详细介绍所有的图形可用的属性。
下面进行一下简单的解释
<graph>元素是所有FCF XML文档的主元素。它描述数据的开始和结束。它还有一些属性可以控制图形。这些属性我们在图形XML参考一章会讲到。
<set>元素是<graph>的子元素,它描述一个数据集,这个数据集决定了图形上的数据。一个典型的<set>元素看起来就像这样:


<set name='Jan' value='27400' color='AFD8F8' hoverText="January, 17400" link="details.asp?month=jan" showName="1"/>  


 

<trendLines> 元素,它可以在图形上画出一条趋势线。例如,下面的代码里,我们在26000这个值画出了一条线,用来表示月平均销售额。

<line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/> 

 

多系列图形


多系列图形被用来比较两个或更多的数据集。
我们看看下面的代码。


图片1



 

<graph caption='Business Results 2005 v 2006' xAxisName='Month' yAxisName='Revenue'   
  
showValues='0' numberPrefix='$' decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70'     
  
showColumnShadow='1' divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1'     
  
alternateHGridColor='f8f8f8' alternateHGridAlpha='60' >   
   
  
<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' color='c4e3f7' >   
    
<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' color='Fad35e' >   
    
<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>   
   
  
<trendlines>   
    
<line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/>   
  
</trendlines>   
   
</graph> 



我们发现,上面多了一个 <categories>元素,它包含很多的子元素,如

<category name='Jan' /> 


每个<category>就表示X轴上的一个名称。
上面还有两个<dataset>元素,一个用来表示2006年的数据,一个表示2005年。每个<set>则表示图形上的一个数据。
注意<categories>的子元素的数量应该和<dataset>子元素的一致。 
下一章我们来看看组合图的XML。

 

本文原始地址:http://ajava.org/hot/fusioncharts/874.html



AJava.org --一个Java门户! 转载请以连接方式注明来自AJava.org

posted on 2009-03-23 09:07 道长A@ajava.org 阅读(1492) 评论(0)  编辑  收藏 所属分类: FusionCharts 开发指南


只有注册用户登录后才能发表评论。


网站导航: