FusionCharts_free_使用手冊_百度文庫

1、FusionCharts free 使用手冊一、概述FusionCharts是InfoSoft Global公司的一個產(chǎn)品，InfoSoft Global 公司是專業(yè)的Flash圖形方案提供商，他們還有幾款其他的，基于Flash技術(shù)的產(chǎn)品，都非常的漂亮。FusionCharts Free則是FusionCharts提供的一個免費版本，雖然免費，功能依然強大，圖形類型依然豐富。不得不感嘆技術(shù)發(fā)展的真快，99年的時候，flash剛剛在互聯(lián)網(wǎng)上流行，那時還只是一個簡單的動畫軟件，編程能力有限。但現(xiàn)在flash幾乎無所不能了，圖形報表則是它大展手腳的一個領(lǐng)域。FusionCharts free 是一個

2、跨平臺，跨瀏覽器的flash圖表組件解決方案，能夠被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 簡單 HTML 頁面甚至PPT調(diào)用。你不需要知道任何關(guān)于flash編程的知識，你只需要知道你所用的編程語言就可以了。FusionCharts free 目前最新版本是v2.1，主要做了以下改動： 增加了使用jsp和Ruby on Rails來集成FusionCharts的代碼和文檔。 FusionCharts DOM更加容易地把圖表加載到你的頁面上。 修改了.Net的使用代碼和文檔。 增加了新的PHP API ,并修復(fù)了一些BUG。 修改了

3、FusionCharts.js ，以便可以支持雙引號。（那就是說以前不支持？） 增加了在FusionCharts使用UTF-8編碼的示例。 FusionCharts到底能做什么呢？下面就給大家展示一下。3D/2D 柱形圖圖片1圖片2曲線圖圖片3圖片43D/2D餅圖、環(huán)圖圖片5圖片6區(qū)域圖圖片7圖片8堆棧圖圖片9圖片10聯(lián)合圖圖片11圖片12蠟燭圖圖片13圖片14漏斗圖圖片15圖片16甘特圖圖片17圖片18看了這么多漂亮的圖形以后，是不是有點感到興奮呢？如果把這么漂亮專業(yè)的圖形放到用戶面前，相信他們也會滿意的。事實上，上面的圖形，只是本道的截圖，真正的flash圖表，在顯示時還有優(yōu)美的動畫。好了

4、，就不在多 說了，下篇文章，本道將介紹如何安裝使用FusionCharts。二、下載及安裝下載你可以在下面的地址下載它。免費漂亮的Flash圖形報表-FusionCharts Free V2.1下載文件不大，共4.22M。將FusionCharts Free（以下簡稱FCF）解壓到任意一個目錄后，點擊目錄下的index.html，就可以打開FCF的文檔。這份文檔我們的網(wǎng)站上也有，地址是/demo/fusionchartsfree/。目錄結(jié)構(gòu)現(xiàn)在我們就來看看這個下載包里面都有些什么東西。SWF文件（創(chuàng)建圖形主要靠它們了）所有的SWF文件（共22個）都在FusionC

5、hartsFree>Charts文件夾。如果你需要在你的web應(yīng)用里創(chuàng)建圖形，那么就把這些SWF文件都拷到你的應(yīng)用下面。FusionCharts JavaScript文件FusionCharts JavaScript文件放在FusionChartsFree>JSClass文件夾。這些文件能夠幫你用一種友好的方式把圖形嵌入到html頁面。示例代碼所有的代碼都放在FusionChartsFree>Code文件夾。圖形例子我們創(chuàng)建了一些圖形例子，放在FusionChartsFree>Gallery文件夾。你也可以通過文檔左邊的菜單Sample Charts來訪問它。文檔文檔就

6、放在FusionChartsFree>Contents文件夾，你可以直接點擊FusionChartsFree下面的index.html來訪問。安裝了解了下載包的目錄結(jié)構(gòu)以后，我們再來看看如何安裝FCF到web應(yīng)用里。只需要兩個步驟即可完成安裝。1、在你的web應(yīng)用根目錄下新建一個叫FusionCharts的文件夾。當(dāng)然，并不是說它一定要叫這個名字，也不是一定要在根目錄下。2、把所有的SWF文件都拷貝到這個FusionCharts里。這就完成安裝了，不再需要其他多余的步驟。當(dāng)然，有些情況下，并不需要與服務(wù)器的交互（比如，你直接使用JavaScript來嵌入，而不用jsp或php。數(shù)據(jù)也是直

7、接寫死在你的JavaScript代碼里或xml文件里。），為了學(xué)習(xí)方便，你也可以把它安裝在你的電腦上隨便一個地方，比如d:test下。安裝步驟和上面的安裝一樣。SWF接下來介紹SWF文件都分別對應(yīng)哪種圖形。圖形類型文件名 Single Series Charts Column 3DFCF_Column3D.swfColumn 2D FCF_Column2D.swfLine 2D FCF_Line.swfArea 2D FCF_Area2D.swfBar 2D FCF_Bar2D.swfPie 2D FCF_Pie2D.swfPie 3D FCF_Pie3D.swfDoughnut 2

8、D FCF_Doughnut2D.swf Multi-series Charts Multi-series Column 2D FCF_MSColumn2D.swfMulti-series Column 3DFCF_MSColumn3D.swfMulti-series Line 2DFCF_MSLine.swfMulti-series Bar 2DFCF_MSBar2D.swfMulti-series Area 2DFCF_MSArea2D.swf Stacked Charts Stacked Column 3D FCF_StackedColumn3D.swfStacked

9、 Column 2DFCF_StackedColumn2D.swfStacked Bar 2DFCF_StackedBar2D.swfStacked Area 2D FCF_StackedArea2D.swf Combination ChartsMulti-series Column 3D + Line - Dual Y AxisFCF_MSColumn2DLineDY.swfMulti-series Column 3D + Line - Dual Y AxisFCF_MSColumn3DLineDY.swf Financial Charts Candlestick Cha

10、rtFCF_Candlestick.swf  Funnel Chart Funnel Chart FCF_Funnel.swf  Gantt Chart  Gantt Chart FCF_Gantt.swfFCF支持上面的22種圖形，對于大部分人來說，都足夠了。好了，到現(xiàn)在為止還沒有開始真正的編程，大家可能有點急了吧，下篇文章我們就來創(chuàng)建我們的第一個Flash圖形報表。三、我的第一個圖形在介紹完了FCF的下載安裝以后，現(xiàn)在，我們終于要開始創(chuàng)建我們的第一個圖表了。我們將要創(chuàng)建一個簡單的3D柱狀圖形，用它來展示每月銷售情況摘要。要使用FC

11、F來創(chuàng)建圖形，你需要做下面三件事情：1.選擇好你要創(chuàng)建的圖形類型對應(yīng)的SWF文件。例如，我們現(xiàn)在要創(chuàng)建的是3D柱狀圖形，那么我們的SWF文件就是FCF_Column3D.swf。上篇文章已經(jīng)介紹過了，所有的SWF文件都放在FusionChartsFree>Charts文件夾里。2.XML數(shù)據(jù)文件。FCF只接受基于XML格式的數(shù)據(jù)。因此，你需要把你的數(shù)據(jù)轉(zhuǎn)成XML格式。3.HTML文件。這個HTML文件將包含用來嵌入圖形的代碼。在我們進(jìn)行上面的工作之前，我們先要新建一個文件夾。例如，我們創(chuàng)建一個叫c:FusionCharts 的文件夾。以后我們的例子都放到這個里面。對于我們的第一個例子來說

12、，我們將在c:FusionCharts下再建一個叫MyFirstChart的文件夾。設(shè)置SWF文件我們還要在c:FusionCharts下建一個叫FusionCharts的文件夾?，F(xiàn)在，我們把所有的SWF文件都拷貝到到這個文件下面（c:FusionChartsFusionCharts）。以后，我們所有例子的代碼，都要引用這個文件夾下面的SWF文件。好了，SWF文件就設(shè)置好了。創(chuàng)建XML數(shù)據(jù)文檔要做報表，當(dāng)然要有數(shù)據(jù)了。在這個例子里，我們準(zhǔn)備展示一年里每個月的銷售情況。所有數(shù)據(jù)看起來就像下面的表格中的一樣。我們知道，F(xiàn)CF只接受XML格式的數(shù)據(jù)，其他如Excel，CSV，text等都不行?，F(xiàn)在我

13、們按照上表中的數(shù)據(jù)，做成一個叫Data.xml的XML文件，保存在c:FusionChartsMyFirstChart文件夾下。這個文件的內(nèi)容如下：1. <graph caption='每月銷售額柱形圖' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>   2.  &

14、#160; <set name='一月' value='462' color='AFD8F8' />   3.    <set name='二月' value='857' color='F6BD0F' />   4.    <set name='三月'

15、60;value='671' color='8BBA00' />   5.    <set name='四月' value='494' color='FF8E46' />   6.    <set name='五月' value='761' color='008E8

16、E' />   7.    <set name='六月' value='960' color='D64646' />   8.    <set name='七月' value='629' color='8E468E' />   9.   

17、; <set name='八月' value='622' color='588526' />   10.    <set name='九月' value='376' color='B3AA00' />   11.    <set name='十月' 

18、;value='494' color='008ED6' />   12.    <set name='十一月' value='761' color='9D080D' />   13.    <set name='十二月' value='960' color='A18

19、6BE' />   14. graph>   上面的代碼里，有一個叫 的root元素，它還有一些屬性，用來定義標(biāo)題，坐標(biāo)軸，數(shù)值格式。我們還看到有很多 元素，它用來描述數(shù)據(jù)。name屬性用來表示月份名稱，value屬性表示銷售額，color屬性表示圖形顏色。創(chuàng)建包含圖形的HTML文件每個圖形都要被放到HTML文件里才能顯示，現(xiàn)在，我們把下面的代碼保存c:FusionChartsMyFirstChartChart.html文件里。1. <html>   2.    

20、<head>   3.       <title>My First FusionCharts title>   4.     head>   5.    <body bgcolor="#ffffff">   6.       <OBJE

21、CT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=httpversion=6,0,0,0" width="600" height="500" id="Column3D" >   7.          <param name="

22、movie" value="./FusionCharts/FCF_Column3D.swf" />   8.          <param name="FlashVars" value="&dataURL=Data.xml&chartWidth=600&chartHeight=500">   9.  &#

23、160;       <param name="quality" value="high" />   10.          <embed src="./FusionCharts/FCF_Column3D.swf" flashVars="&dataURL=Data.xml

24、&chartWidth=600&chartHeight=500" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage= />   11.        obje

25、ct>   12. body>   13. html>   上面的代碼，其實就是一個顯示flash的簡單標(biāo)記。movie參數(shù)值指定我們的SWF文件，即FCF_Column3D.swf。FlashVars參數(shù)值用來指定XML文件的路徑以及圖形的寬和高?？吹竭@里，如果不熟悉在網(wǎng)頁里調(diào)用Flash的朋友，可能會有點迷惑，因為我們發(fā)現(xiàn)有一個embed參數(shù)，它的各個值都和param參數(shù)的值是一樣的，為什么會這樣呢？其實，這是為了在不同的瀏覽器里都能運行Flash的一個解決辦法。IE瀏覽器是使用param參數(shù)來運行Flash的，

26、而Netscape則是使用embed參數(shù)來運行Flash。因此，為了保證我們的應(yīng)用能夠在大多數(shù)瀏覽器上運行，我們就需要加上embed參數(shù)，并且值和param完全相同。好了，所有工作都做完了，現(xiàn)在，你可以用IE打開Chart.html，就能看到你的第一個漂亮的Flash圖形了。圖片1問題如果你很不幸，沒有在頁面上看到圖形，那么可能是下面的原因之一：1.SWF 沒有放到正確的文件夾。2.在Chart.html里，SWF的路徑設(shè)置不正確。3.沒有安裝Flash Player。4.沒有啟用瀏覽器Flash播放選項。如果你得到了一個“Error in Loading Data”的消息，可能是：文件沒放到

27、正確的文件夾。的文件名不正確。比如，你可能不小心把它命名為。如果你得到了一個“Invalid XML Data”的消息，可能是里的內(nèi)容有錯誤。到這里，第一個圖表就做完了，感覺怎么樣？你是覺得簡單呢，容易呢，還是小Case呢？不過，這里我有個小問題，就是Data.xml里，yAxisName屬性如果是中文的話，顯示不出來。希望隨著教程的繼續(xù)，我進(jìn)一步了解FCF以后，可以解決這個小問題，也許它就是BUG。圖形轉(zhuǎn)換上面的圖形是一個柱形圖，如果我們想用同樣的數(shù)據(jù)，以餅圖來展示，我們只需要將Chart.html代碼中的“FCF_Column3D.swf”改成餅圖的SWF文件就可以了，即“FCF_Pie3

28、D.swf”?，F(xiàn)在我們再刷新瀏覽器，看看效果：圖片1夠酷吧。在接下來的系列文章里，我將介紹使用JavaScript來加載Flash。四、使用JavaScript加載圖形在上篇文章里，我們做出了第一個圖形報表，我們是直接在HTML里使用和標(biāo)記來加載圖形的。1. <html>   2. .     3.    <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=httpver

29、sion=6,0,0,0" width="600" height="500" id="Column3D" >   4.       <param name="movie" value="./FusionCharts/FCF_Column3D.swf" />   5.    

30、;   <param name="FlashVars" value="&dataURL=Data.xml&chartWidth=600&chartHeight=500">   6.       <param name="quality" value="high" />   7.  

31、     <embed src="./FusionCharts/FCF_Column3D.swf" flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500" quality="high" width="600" height="500" name="Column3D"

32、0;type="application/x-shockwave-flash" pluginspage= />   8.     object>   9. .     10. html>   實際上，我們還可以使用FCF提供的一個JavaScript類來加載圖形。使用JavaScript的方式有幾個好處，一是代碼量大大減少，特別是當(dāng)一個頁面上有幾個圖形時。二是代碼更加直觀。三是可以避免IE出現(xiàn)“單擊以激活使用這個控件”的

33、提示。使用JS加載這個JS類文件就在FusionChartsFree>JSClass文件夾下，我們把它拷貝到c:FusionChartsFusionCharts下面?，F(xiàn)在，我們把原來的Chart.html復(fù)制一份，命名為JSChart.html。這樣做是為了避免直接在Chart.html上進(jìn)行修改，因為以后還要用到Chart.html，下面就是JSChart.html的代碼。1. <html>   2.     <head>   3.     &

34、#160;   <script language="JavaScript" src="./FusionCharts/FusionCharts.js"> script>   4.      head>     5. <body bgcolor="#ffffff">   6.     <di

35、v id="chartdiv" align="center">圖形將出現(xiàn)這個DIV里，到時這里的字將被圖形替代。 div>   7.     <script type="text/javascript">   8.         var myChart = new FusionCha

36、rts("./FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500"    9.         myChart.setDataURL("Data.xml"    10.         myChart.ren

37、der("chartdiv"    11.      script>   12. body>   13. html>   我們對上面的代碼進(jìn)行以下解釋。首先，我們用下面的語句來加載FusionCharts.js文件。1. "JavaScript" src="./FusionCharts/FusionCharts.js">   然后，我們定義了一個DIV，它還有個i

38、d。1. <div id="chartdiv" align="center">圖形將出現(xiàn)這個DIV里，到時這里的字將被圖形替代。 div>   我們的圖形就出現(xiàn)在這個DIV里。接著，我們用四個參數(shù)建立了一個FusionCharts對象，1. var myChart = new FusionCharts("./FusionCharts/FCF_Column3D.swf", "myChartId", &

39、quot;600", "500"   第一個參數(shù)是SWF文件的地址。第二個是圖形的id。這個id你可以隨便叫什么，但是要注意，在后面我們講到一個頁面里有多個圖形的時候，這個id一定要是唯一的。第三個參數(shù)是圖形的寬。第四個參數(shù)是圖形的高。我們還要設(shè)置數(shù)據(jù)文件的地址。1. myChart.setDataURL("Data.xml"    最后，我們把圖形渲染在指定的地方。1. myChart.render("chartdiv"   "cha

40、rtdiv"就是前面的DIV的id，這就表示把圖形render到"chartdiv"。現(xiàn)在你運行JSChart.html，你會看到同Chart.html一樣的效果。很顯然使用JavaScript加載圖形，更方便，更直觀。多圖形有時候我們需要在一個頁面里顯示多個圖形，例如，我們同時以餅圖、柱狀圖、曲線圖、區(qū)域圖四中形式來表現(xiàn)每個月的銷售情況，讓用戶想看哪個就看哪個。怎么加載多個圖形呢？很簡單，看下面。1. <html>   2. <head><title>多圖形 title>   &#

41、160; 3.    <script language="JavaScript" src="./FusionCharts/FusionCharts.js"> script>   4. head>   5. <body bgcolor="#ffffff">   6.    <div id="chartdiv1"

42、0;align="center">First Chart Container Pie 3D div>   7.    <script type="text/javascript">   8.        var myChart1 = new FusionCharts("./FusionChar

43、ts/FCF_pie3D.swf", "myChartId1", "600", "400"     9.        myChart1.setDataURL("Data.xml"     10.        myChart1.render("chartdiv1&qu

44、ot;    11.     script>   12.    13.   <div id="chartdiv2" align="center">Second Chart Container Column 3D div>   14.    <script type="text/javasc

45、ript">   15.        var myChart2 = new FusionCharts("./FusionCharts/FCF_Column3D.swf","myChartId2", "600","300"     16.        myCha

46、rt2.setDataURL("Data.xml"     17.        myChart2.render("chartdiv2"    18.     script>   19.    20.   <div id="chartdiv3" align="center"&g

47、t;Third Chart Container Line 2D div>   21.    <script type="text/javascript">   22.        var myChart3 = new FusionCharts("./FusionCharts/FCF_line.swf",

48、60;"myChartId3", "600", "300"     23.        myChart3.setDataURL("Data.xml"     24.        myChart3.render("chartdiv3"    25. 

49、0;   script>   26.    27.   <div id="chartdiv4" align="center">Fourth Chart Container Area 2D div>   28.    <script type="text/javascript">  

50、29.        var myChart4 = new FusionCharts("./FusionCharts/FCF_area2D.swf", "myChartId4", "400", "250"     30.        myChart4.setDataURL(&q

51、uot;Data.xml"     31.        myChart4.render("chartdiv4"    32.     script>   33. body>   34. html>   35.    仔細(xì)對比上面的四個圖形代碼，其實就是div的id，F(xiàn)usionCharts對象的名稱,圖形的id，還有圖

52、形的SWF地址這些地方發(fā)生了變化。最后的效果如下：圖片1下篇文章本道將講述如何使用非獨立的數(shù)據(jù)文件作為數(shù)據(jù)來源。五、使用dataXML加載數(shù)據(jù)在前面的例子里，我們使用的數(shù)據(jù)都是一個單獨的XML文件，它可以被很多需要它的文件來調(diào)用。但是有的時候，我們可能不需要單獨的文件，這時，我們就可以使用dataXML 方法來進(jìn)行數(shù)據(jù)的調(diào)用。使用dataXML提供數(shù)據(jù)dataXML 和dataURL都可以提供數(shù)據(jù)，dataURL是以把XML文件地址以URL的形式告訴FCF，如一個靜態(tài)的文件Data.xml，或者是一個動態(tài)的文件，如mydata.jsp（頁面返回XML格式的文本）。dataXML則是以XML文本

53、的形式告訴FCF。可能有點不好理解，看看下面的代碼就知道了。1. <html>   2. <body bgcolor="#ffffff">   3. <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=httpversion=6,0,0,0" width="600" height="500" 

54、;id="Column3D" >   4.    <param name="movie" value="./FusionCharts/FCF_Column3D.swf?chartWidth=600&chartHeight=500" />   5.    <param name="FlashVars" value="&

55、amp;dataXML= 8F 8' /> 0F ' /> " >    6.    <param name="quality" value="high" />   7.    <embed src="./FusionCharts/FCF_Column3D.swf?chartWidth=600&chartHeight=

56、500" flashVars="&dataXML= 8F 8' /> 0F ' /> "   quality = "high"   width = "600"   height = "500"   name = "Column3D"   type = "application/x-shockwave-flash"   pluginspage

57、=  />    8. object>   9. body>   10. html>   我們把上面的代碼保存到一個叫ChartDataXML.html的文件里?？梢钥吹剑現(xiàn)lashVars 的值是這樣的一種形式：在EMBED 標(biāo)記里，是這樣的：而原來我們放到FlashVars的兩個參數(shù)-chartWidth，chartHeight，則被放到了SWF文件地址的后面。使用JavaScript和dataXML看下面的代碼。1. <html>   2. &

58、lt;head>   3.    <script language="JavaScript" src="./FusionCharts/FusionCharts.js"> script>   4. head>     5. <body bgcolor="#ffffff">   6.    7.    

59、;<div id="chartdiv" align="center">The chart will appear within this DIV. This text will be replaced by the chart. div>   8.    <script type="text/javasc

60、ript">   9.       var myChart = new FusionCharts("./FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500"    10.       myChart.setDat

61、aXML("<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'><set name='Jan' value='462' colo

62、r='AFD8F8' /><set name='Feb' value='857' color='F6BD0F' /><set name='Mar' value='671' color='8BBA00' /><set name='Apr' value='494' color='FF8E46&#

63、39;/><set name='May' value='761' color='008E8E'/><set name='Jun' value='960' color='D64646'/><set name='Jul' value='629' color='8E468E'/><set name='Au

64、g' value='622' color='588526'/><set name='Sep' value='376' color='B3AA00'/><set name='Oct' value='494' color='008ED6'/><set name='Nov' value='761'&#

65、160;color='9D080D'/><set name='Dec' value='960' color='A186BE'/> graph>"    11.           12.       myChart.render("chartdiv"    13.

66、60;   script>   14.    15. body>   16. html>   17.    原來我們調(diào)用的是setDataURL(方法，而現(xiàn)在是setDataXML(方法，它的參數(shù)則是一個完整的XML字符串。不管我們使用什么方法，我們都能得到一樣的結(jié)果。setDataXML(方法的問題我們知道，在使用GET方法得到參數(shù)時，瀏覽器對參數(shù)值的長度是有一定的限制的，所以，如果XML字符過長，可能會產(chǎn)生問題。這時我們就需要使用setDataURL(方

67、法。如果你的XML字符里含有雙字節(jié)字符，例如中文字符，你就不能使用setDataXML(方法，你應(yīng)該使用setDataURL(方法。最佳模式在我們的實際應(yīng)用里，數(shù)據(jù)不可能是靜態(tài)的，它可能是有用戶選擇查詢條件，然后提交給服務(wù)器，服務(wù)器返回一個查詢的結(jié)果，比如search.jsp?year=2008。所以我給大家推薦的最佳模式是使用setDataURL(方法，并且使用JavaScript來加載圖形。在使用setDataURL(方法時，如果地址里含有“?”、“&”等字符，你就需要對這個地址進(jìn)行URL編碼。在JavaScript里進(jìn)行編碼，使用六、圖形的基本元素在我們了解了FCF的各種使用方法

68、以后，我們就會發(fā)現(xiàn)，其實我們要做出各種不同的Flash圖形，最關(guān)鍵的就是那個XML數(shù)據(jù)。它不但可以描述圖形的數(shù)據(jù)，還可以描述圖形的樣式。大家可能迫不及待的想要了解XML的細(xì)節(jié)，別急，在此之前，我們需要搞清楚圖形的組成部分，比如什么是X軸，什么是Y軸，什么是圖形背景，什么是是圖形邊框。只有了解這些以后，我們才能做出我們相應(yīng)的圖形。圖形背景和畫布對于3D圖形，你可以設(shè)置canvas background（畫布背景）和Chart Background（圖形背景）的顏色，還可以設(shè)置它們是否可見。對于2D圖形，你可以設(shè)置canvas background color（畫布背景顏色），background

69、 alpha（背景透明度），canvas border color（畫布邊框顏色），canvas border thickness（畫布邊框厚度）等屬性。Chart Labels（圖形標(biāo)簽）你可以設(shè)置caption（標(biāo)題）, sub caption（子標(biāo)題）, x-axis name（X軸標(biāo)簽）, y-axis name（Y軸標(biāo)簽）, y-axis max limit（Y軸最大值）， y-axis min limit（Y軸最小值）, number Prefix（數(shù)值前綴）, number Suffix（數(shù)值后綴），Chart Legend（圖例）。DIV lines（刻度線）你可以設(shè)置Tren

70、d Line（趨勢線），Zero Plane（零平面），Div Line（刻度線）等的一些屬性。Alternating（間隔色）你可以設(shè)置Alternating Colored Horizontal Grids（垂直表格間隔色）以及透明度，Alternating Colored Vertical  Grids（水平表格間隔色）以及透明度。Hover Caption（提示信息）你可以設(shè)置hover caption background-提示框的背景，hover caption border提示框的邊框，hover caption data separator character-提示信

71、息的分割字符。Anchors（錨點）你可以設(shè)置Anchors（錨點）的shape（形狀）, radius（半徑）, border color（邊框顏色）, thickness（邊框厚度）, alpha（邊框透明度）, background color（背景顏色）, background alpha（背景透明度） 等屬性。本章我們了解了一些圖形基本構(gòu)成元素，還了解了我們可以對它們進(jìn)行哪些設(shè)置。下章我們將介紹一下FCF的XML。七、FusionCharts Free和XMLFusionCharts使用XML來創(chuàng)建和控制圖形。數(shù)據(jù)類型在FCF里，一共有四種數(shù)據(jù)類型。Boolean - 它的值為0或1

72、，1表示true，0表示false。例如 。Number - 它的值應(yīng)該是一個數(shù)值。例如 。String - 它的值是一個字符串。例如 。Hex Color Code - 它表示一個16進(jìn)制的顏色，不需要用“#”。例如 。每個圖形都有很多屬性，我們都可以通過XML對它進(jìn)行設(shè)置，但是，我們并不需要對每一個屬性都進(jìn)行設(shè)置，因為它們都有一個默認(rèn)值，如果我們沒有設(shè)置，F(xiàn)CF會使用默認(rèn)值來替代。FCF里有幾種類型的XML結(jié)構(gòu)：單系列圖形單系列圖形是指只有一個數(shù)據(jù)集的圖形。例如，我們的第一個例子，每月銷售情況 ，就是一個單系列圖形（我們只有一年的數(shù)據(jù)）。我們并沒有對數(shù)據(jù)進(jìn)行比較，例如，比較兩年的每月銷售情

73、況。我們看看下面的例子。圖片11. <graph caption='Business Results 2006' xAxisName='Month' yAxisName='Revenue' showValues='0'   2. numberPrefix='$' decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70&

74、#39; showColumnShadow='1'     3. divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1' alternateHGridColor='f8f8f8'   4.   alternateHGridAlpha='60' >    &#

75、160;           5.    <set name='Jan' value='27400' color='AFD8F8'/>           6.    <set name='Feb' value='298

76、00' color='F6BD0F' />           7.    <set name='Mar' value='25800' color='8BBA00'/>           8.    <set&#

77、160;name='Apr' value='26800' color='FF8E46'/>           9.    <set name='May' value='29600' color='008E8E' />        &

78、#160;  10.    <set name='Jun' value='32600' color='D64646'/>           11.    <set name='Jul' value='31800' color='8E468E'/> 

79、          12.    <set name='Aug' value='36700' color='588526'/>           13.    <set name='Sep' value='29700'&

80、#160;color='B3AA00'/>           14.    <set name='Oct' value='31900' color='008ED6'/>           15.    <set name=

81、9;Nov' value='34800' color='9D080D'/>           16.    <set name='Dec' value='24800' color='A186BE' />          

82、 17.            18.  <trendlines>           19.    <line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/&g

83、t;           20.   trendlines>           21.            22. graph>   上面的代碼里多了一些我們沒接觸過的屬性，沒關(guān)系，在圖形XML參考一章我們將詳細(xì)介紹所有的圖形可用的屬性。下面進(jìn)行一下簡單的解釋元素是所有FCF XML

84、文檔的主元素。它描述數(shù)據(jù)的開始和結(jié)束。它還有一些屬性可以控制圖形。這些屬性我們在圖形XML參考一章會講到。元素是 的子元素，它描述一個數(shù)據(jù)集，這個數(shù)據(jù)集決定了圖形上的數(shù)據(jù)。一個典型的 元素看起來就像這樣：1. <set name='Jan' value='27400' color='AFD8F8' hoverText="January, 17400" link="details.asp?month=jan" showName=&qu

85、ot;1"/>     元素，它可以在圖形上畫出一條趨勢線。例如，下面的代碼里，我們在26000這個值畫出了一條線，用來表示月平均銷售額。1. <line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/>   多系列圖形多系列圖形被用來比較兩個或更多的數(shù)據(jù)集。我們看看下面的代碼。圖片11. <graph c

86、aption='Business Results 2005 v 2006' xAxisName='Month' yAxisName='Revenue'   2.   showValues='0' numberPrefix='$' decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70'&

87、#160;    3.   showColumnShadow='1' divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1'     4.   alternateHGridColor='f8f8f8' alternateHGridAlpha='60' >  

88、 5.    6.   <categories>   7.     <category name='Jan' />   8.     <category name='Feb' />   9.     <category name='Mar'

89、 />   10.     <category name='Apr' />   11.     <category name='May' />   12.     <category name='Jun' />   13.  &#

90、160;  <category name='Jul' />   14.     <category name='Aug' />   15.     <category name='Sep' />   16.     <category na

91、me='Oct' />   17.     <category name='Nov' />   18.     <category name='Dec' />   19.    categories>   20.    21.   <dataset seriesName='2006' color='c4e3f7'