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

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

本章我们来看看什么是组合图形，以及它的XML是怎么写的。

什么是组合图形

当我们想在一张图形里表示多个图形类型时，我们就要用到组合图。FCF提供了双Y轴组合图，它有两个Y轴，每个轴表示不同的刻度（例如，收益和数量，或者访问量和下载量等等。）。图形左边的坐标轴叫主坐标轴，图形右边的叫次坐标轴。
FCF里组合图分为2D和3D，下面的图形就是一个2D双Y轴组合图。

图片1

这个图里有月销售额和数量，X轴表示月份。现在我们来看看这两个Y轴：
主Y轴表示2005和2006的销售额，柱状图和这个主Y轴对应。
次Y轴表示数量，曲线图和次Y轴对应。
在双Y轴图形里，我们必须提供至少两个数据集，一个对应主Y轴，一个对应次Y轴。如果你没有提供两个，图形就不会正确显示。

代码

上图的XML代码如下：

< 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 >

 

简单解释

这个组合图的XML和一个多系列图形的XML较为类似，因此，我们只解释以下不同的地方。
在双Y轴组合图里，有两个Y轴，每个Y轴都可以有它自己的刻度和数值格式属性。
PYAxisName表示主轴的名称，SYAxisName表示次轴的名称。
在每个数据集里，我们都必须用parentYAxis属性来指定它是属于哪个轴。这个属性的值只能是“P”或“S”。P代表主轴，S代表次轴。例如我们的代码里，在主轴上有两个销售额数据集--“2005”和“2006”：

< dataset  seriesName ='2006'  parentYAxis ='P'    >    
   
           
   
< dataset  seriesName ='2005'  parentYAxis ='P'    >   

在次轴上有一个数量数据集：

< dataset  seriesName ='Total  Quantity' parentYAxis ='S'    >  

上面的例子里，数量数据集表示的是2005和2006当月数量的总数。实际上，我们可以在次轴上也设置两个数据集，一个表示2005年每月的数量，一个表示2006年的。大家可以自己练习一下。

注意

在运行这个例子是，Flash文件应该使用FCF_MSColumn2DLineDY.swf，从上图我们可以看出，它是column和line的组合，因此要用FCF_MSColumn2DLineDY.swf。更多的图形和Flash文件的对应关系，请参见http://ajava.org/hot/fusioncharts/816.html
本文原始地址：http://ajava.org/hot/fusioncharts/875.html

 转载请以连接方式注明来自 AJava.org