道長A的地盤

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。