FusionCharts free 使用手冊(cè).doc

FusionCharts free 使用手冊(cè)一、概述FusionCharts是InfoSoft Global公司的一個(gè)產(chǎn)品，InfoSoft Global 公司是專業(yè)的Flash圖形方案提供商，他們還有幾款其他的，基于Flash技術(shù)的產(chǎn)品，都非常的漂亮。FusionCharts Free則是FusionCharts提供的一個(gè)免費(fèi)版本，雖然免費(fèi)，功能依然強(qiáng)大，圖形類型依然豐富。不得不感嘆技術(shù)發(fā)展的真快，99年的時(shí)候，flash剛剛在互聯(lián)網(wǎng)上流行，那時(shí)還只是一個(gè)簡單的動(dòng)畫軟件，編程能力有限。但現(xiàn)在flash幾乎無所不能了，圖形報(bào)表則是它大展手腳的一個(gè)領(lǐng)域。FusionCharts free 是一個(gè)跨平臺(tái)，跨瀏覽器的flash圖表組件解決方案，能夠被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 簡單 HTML 頁面甚至PPT調(diào)用。你不需要知道任何關(guān)于flash編程的知識(shí)，你只需要知道你所用的編程語言就可以了。FusionCharts free 目前最新版本是v2.1，主要做了以下改動(dòng)： 增加了使用jsp和Ruby on Rails來集成FusionCharts的代碼和文檔。 FusionCharts DOM更加容易地把圖表加載到你的頁面上。 修改了.Net的使用代碼和文檔。 增加了新的PHP API ,并修復(fù)了一些BUG。 修改了FusionCharts.js ，以便可以支持雙引號(hào)。（那就是說以前不支持？） 增加了在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看了這么多漂亮的圖形以后，是不是有點(diǎn)感到興奮呢？如果把這么漂亮專業(yè)的圖形放到用戶面前，相信他們也會(huì)滿意的。事實(shí)上，上面的圖形，只是本道的截圖，真正的flash圖表，在顯示時(shí)還有優(yōu)美的動(dòng)畫。好了，就不在多 說了，下篇文章，本道將介紹如何安裝使用FusionCharts。二、下載及安裝下載你可以在下面的地址下載它。免費(fèi)漂亮的Flash圖形報(bào)表-FusionCharts Free V2.1下載文件不大，共4.22M。將FusionCharts Free（以下簡稱FCF）解壓到任意一個(gè)目錄后，點(diǎn)擊目錄下的index.html，就可以打開FCF的文檔。這份文檔我們的網(wǎng)站上也有，地址是/demo/fusionchartsfree/。目錄結(jié)構(gòu)現(xiàn)在我們就來看看這個(gè)下載包里面都有些什么東西。SWF文件（創(chuàng)建圖形主要靠它們了）所有的SWF文件（共22個(gè)）都在FusionChartsFreeCharts文件夾。如果你需要在你的web應(yīng)用里創(chuàng)建圖形，那么就把這些SWF文件都拷到你的應(yīng)用下面。FusionCharts JavaScript文件FusionCharts JavaScript文件放在FusionChartsFreeJSClass文件夾。這些文件能夠幫你用一種友好的方式把圖形嵌入到html頁面。示例代碼所有的代碼都放在FusionChartsFreeCode文件夾。圖形例子我們創(chuàng)建了一些圖形例子，放在FusionChartsFreeGallery文件夾。你也可以通過文檔左邊的菜單Sample Charts來訪問它。文檔文檔就放在FusionChartsFreeContents文件夾，你可以直接點(diǎn)擊FusionChartsFree下面的index.html來訪問。安裝了解了下載包的目錄結(jié)構(gòu)以后，我們?cè)賮砜纯慈绾伟惭bFCF到web應(yīng)用里。只需要兩個(gè)步驟即可完成安裝。1、在你的web應(yīng)用根目錄下新建一個(gè)叫FusionCharts的文件夾。當(dāng)然，并不是說它一定要叫這個(gè)名字，也不是一定要在根目錄下。2、把所有的SWF文件都拷貝到這個(gè)FusionCharts里。這就完成安裝了，不再需要其他多余的步驟。當(dāng)然，有些情況下，并不需要與服務(wù)器的交互（比如，你直接使用JavaScript來嵌入，而不用jsp或php。數(shù)據(jù)也是直接寫死在你的JavaScript代碼里或xml文件里。），為了學(xué)習(xí)方便，你也可以把它安裝在你的電腦上隨便一個(gè)地方，比如d:test下。安裝步驟和上面的安裝一樣。SWF接下來介紹SWF文件都分別對(duì)應(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 2D FCF_Doughnut2D.swfMulti-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.swfStacked Charts Stacked Column 3D FCF_StackedColumn3D.swfStacked Column 2DFCF_StackedColumn2D.swfStacked Bar 2DFCF_StackedBar2D.swfStacked Area 2D FCF_StackedArea2D.swfCombination ChartsMulti-series Column 3D + Line - Dual Y AxisFCF_MSColumn2DLineDY.swfMulti-series Column 3D + Line - Dual Y AxisFCF_MSColumn3DLineDY.swfFinancial Charts Candlestick ChartFCF_Candlestick.swfFunnel ChartFunnel Chart FCF_Funnel.swfGantt Chart Gantt Chart FCF_Gantt.swfFCF支持上面的22種圖形，對(duì)于大部分人來說，都足夠了。好了，到現(xiàn)在為止還沒有開始真正的編程，大家可能有點(diǎn)急了吧，下篇文章我們就來創(chuàng)建我們的第一個(gè)Flash圖形報(bào)表。三、我的第一個(gè)圖形在介紹完了FCF的下載安裝以后，現(xiàn)在，我們終于要開始創(chuàng)建我們的第一個(gè)圖表了。我們將要?jiǎng)?chuàng)建一個(gè)簡單的3D柱狀圖形，用它來展示每月銷售情況摘要。要使用FCF來創(chuàng)建圖形，你需要做下面三件事情：1.選擇好你要?jiǎng)?chuàng)建的圖形類型對(duì)應(yīng)的SWF文件。例如，我們現(xiàn)在要?jiǎng)?chuàng)建的是3D柱狀圖形，那么我們的SWF文件就是FCF_Column3D.swf。上篇文章已經(jīng)介紹過了，所有的SWF文件都放在FusionChartsFreeCharts文件夾里。2.XML數(shù)據(jù)文件。FCF只接受基于XML格式的數(shù)據(jù)。因此，你需要把你的數(shù)據(jù)轉(zhuǎn)成XML格式。3.HTML文件。這個(gè)HTML文件將包含用來嵌入圖形的代碼。在我們進(jìn)行上面的工作之前，我們先要新建一個(gè)文件夾。例如，我們創(chuàng)建一個(gè)叫c:FusionCharts 的文件夾。以后我們的例子都放到這個(gè)里面。對(duì)于我們的第一個(gè)例子來說，我們將在c:FusionCharts下再建一個(gè)叫MyFirstChart的文件夾。設(shè)置SWF文件我們還要在c:FusionCharts下建一個(gè)叫FusionCharts的文件夾?，F(xiàn)在，我們把所有的SWF文件都拷貝到到這個(gè)文件下面（c:FusionChartsFusionCharts）。以后，我們所有例子的代碼，都要引用這個(gè)文件夾下面的SWF文件。好了，SWF文件就設(shè)置好了。創(chuàng)建XML數(shù)據(jù)文檔要做報(bào)表，當(dāng)然要有數(shù)據(jù)了。在這個(gè)例子里，我們準(zhǔn)備展示一年里每個(gè)月的銷售情況。所有數(shù)據(jù)看起來就像下面的表格中的一樣。我們知道，F(xiàn)CF只接受XML格式的數(shù)據(jù)，其他如Excel，CSV，text等都不行?，F(xiàn)在我們按照上表中的數(shù)據(jù)，做成一個(gè)叫Data.xml的XML文件，保存在c:FusionChartsMyFirstChart文件夾下。這個(gè)文件的內(nèi)容如下：1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 上面的代碼里，有一個(gè)叫的root元素，它還有一些屬性，用來定義標(biāo)題，坐標(biāo)軸，數(shù)值格式。我們還看到有很多元素，它用來描述數(shù)據(jù)。name屬性用來表示月份名稱，value屬性表示銷售額，color屬性表示圖形顏色。創(chuàng)建包含圖形的HTML文件每個(gè)圖形都要被放到HTML文件里才能顯示，現(xiàn)在，我們把下面的代碼保存c:FusionChartsMyFirstChartChart.html文件里。1. 2. 3. MyFirstFusionCharts 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 上面的代碼，其實(shí)就是一個(gè)顯示flash的簡單標(biāo)記。movie參數(shù)值指定我們的SWF文件，即FCF_Column3D.swf。FlashVars參數(shù)值用來指定XML文件的路徑以及圖形的寬和高?？吹竭@里，如果不熟悉在網(wǎng)頁里調(diào)用Flash的朋友，可能會(huì)有點(diǎn)迷惑，因?yàn)槲覀儼l(fā)現(xiàn)有一個(gè)embed參數(shù)，它的各個(gè)值都和param參數(shù)的值是一樣的，為什么會(huì)這樣呢？其實(shí)，這是為了在不同的瀏覽器里都能運(yùn)行Flash的一個(gè)解決辦法。IE瀏覽器是使用param參數(shù)來運(yùn)行Flash的，而Netscape則是使用embed參數(shù)來運(yùn)行Flash。因此，為了保證我們的應(yīng)用能夠在大多數(shù)瀏覽器上運(yùn)行，我們就需要加上embed參數(shù)，并且值和param完全相同。好了，所有工作都做完了，現(xiàn)在，你可以用IE打開Chart.html，就能看到你的第一個(gè)漂亮的Flash圖形了。圖片1問題如果你很不幸，沒有在頁面上看到圖形，那么可能是下面的原因之一：1.SWF 沒有放到正確的文件夾。2.在Chart.html里，SWF的路徑設(shè)置不正確。3.沒有安裝Flash Player。4.沒有啟用瀏覽器Flash播放選項(xiàng)。如果你得到了一個(gè)“Error in Loading Data”的消息，可能是：1.Data.xml文件沒放到正確的文件夾。2.Data.xml的文件名不正確。比如，你可能不小心把它命名為Data.xml.txt。如果你得到了一個(gè)“Invalid XML Data”的消息，可能是;1.Data.xml里的內(nèi)容有錯(cuò)誤。到這里，第一個(gè)圖表就做完了，感覺怎么樣？你是覺得簡單呢，容易呢，還是小Case呢？不過，這里我有個(gè)小問題，就是Data.xml里，yAxisName屬性如果是中文的話，顯示不出來。希望隨著教程的繼續(xù)，我進(jìn)一步了解FCF以后，可以解決這個(gè)小問題，也許它就是BUG。圖形轉(zhuǎn)換上面的圖形是一個(gè)柱形圖，如果我們想用同樣的數(shù)據(jù)，以餅圖來展示，我們只需要將Chart.html代碼中的“FCF_Column3D.swf”改成餅圖的SWF文件就可以了，即“FCF_Pie3D.swf”。現(xiàn)在我們?cè)偎⑿聻g覽器，看看效果：圖片1夠酷吧。在接下來的系列文章里，我將介紹使用JavaScript來加載Flash。四、使用JavaScript加載圖形在上篇文章里，我們做出了第一個(gè)圖形報(bào)表，我們是直接在HTML里使用和標(biāo)記來加載圖形的。1. 2. . 3. 4. 5. 6. 7. 8. 9. . 10. 實(shí)際上，我們還可以使用FCF提供的一個(gè)JavaScript類來加載圖形。使用JavaScript的方式有幾個(gè)好處，一是代碼量大大減少，特別是當(dāng)一個(gè)頁面上有幾個(gè)圖形時(shí)。二是代碼更加直觀。三是可以避免IE出現(xiàn)“單擊以激活使用這個(gè)控件”的提示。使用JS加載這個(gè)JS類文件就在FusionChartsFreeJSClass文件夾下，我們把它拷貝到c:FusionChartsFusionCharts下面?，F(xiàn)在，我們把原來的Chart.html復(fù)制一份，命名為JSChart.html。這樣做是為了避免直接在Chart.html上進(jìn)行修改，因?yàn)橐院筮€要用到Chart.html，下面就是JSChart.html的代碼。1. 2. 3. 4. 5. 6. 圖形將出現(xiàn)這個(gè)DIV里，到時(shí)這里的字將被圖形替代。 7. 8. varmyChart=newFusionCharts(./FusionCharts/FCF_Column3D.swf,myChartId,600,500); 9. myChart.setDataURL(Data.xml); 10. myChart.render(chartdiv); 11. 12. 13. 我們對(duì)上面的代碼進(jìn)行以下解釋。首先，我們用下面的語句來加載FusionCharts.js文件。1. 然后，我們定義了一個(gè)DIV，它還有個(gè)id。1. 圖形將出現(xiàn)這個(gè)DIV里，到時(shí)這里的字將被圖形替代。 我們的圖形就出現(xiàn)在這個(gè)DIV里。接著，我們用四個(gè)參數(shù)建立了一個(gè)FusionCharts對(duì)象，1. varmyChart=newFusionCharts(./FusionCharts/FCF_Column3D.swf,myChartId,600,500); 第一個(gè)參數(shù)是SWF文件的地址。第二個(gè)是圖形的id。這個(gè)id你可以隨便叫什么，但是要注意，在后面我們講到一個(gè)頁面里有多個(gè)圖形的時(shí)候，這個(gè)id一定要是唯一的。第三個(gè)參數(shù)是圖形的寬。第四個(gè)參數(shù)是圖形的高。我們還要設(shè)置數(shù)據(jù)文件的地址。1. myChart.setDataURL(Data.xml); 最后，我們把圖形渲染在指定的地方。1. myChart.render(chartdiv); chartdiv就是前面的DIV的id，這就表示把圖形render到chartdiv?，F(xiàn)在你運(yùn)行JSChart.html，你會(huì)看到同Chart.html一樣的效果。很顯然使用JavaScript加載圖形，更方便，更直觀。多圖形有時(shí)候我們需要在一個(gè)頁面里顯示多個(gè)圖形，例如，我們同時(shí)以餅圖、柱狀圖、曲線圖、區(qū)域圖四中形式來表現(xiàn)每個(gè)月的銷售情況，讓用戶想看哪個(gè)就看哪個(gè)。怎么加載多個(gè)圖形呢？很簡單，看下面。1. 2. 多圖形 3. 4. 5. 6. FirstChartContainerPie3D 7. 8. varmyChart1=newFusionCharts(./FusionCharts/FCF_pie3D.swf,myChartId1,600,400); 9. myChart1.setDataURL(Data.xml); 10. myChart1.render(chartdiv1); 11. 12. 13. SecondChartContainerColumn3D 14. 15. varmyChart2=newFusionCharts(./FusionCharts/FCF_Column3D.swf,myChartId2,600,300); 16. myChart2.setDataURL(Data.xml); 17. myChart2.render(chartdiv2); 18. 19. 20. ThirdChartContainerLine2D 21. 22. varmyChart3=newFusionCharts(./FusionCharts/FCF_line.swf,myChartId3,600,300); 23. myChart3.setDataURL(Data.xml); 24. myChart3.render(chartdiv3); 25. 26. 27. FourthChartContainerArea2D 28. 29. varmyChart4=newFusionCharts(./FusionCharts/FCF_area2D.swf,myChartId4,400,250); 30. myChart4.setDataURL(Data.xml); 31. myChart4.render(chartdiv4); 32. 33. 34. 35. 仔細(xì)對(duì)比上面的四個(gè)圖形代碼，其實(shí)就是div的id，F(xiàn)usionCharts對(duì)象的名稱,圖形的id，還有圖形的SWF地址這些地方發(fā)生了變化。最后的效果如下：圖片1下篇文章本道將講述如何使用非獨(dú)立的數(shù)據(jù)文件作為數(shù)據(jù)來源。五、使用dataXML加載數(shù)據(jù)在前面的例子里，我們使用的數(shù)據(jù)都是一個(gè)單獨(dú)的XML文件，它可以被很多需要它的文件來調(diào)用。但是有的時(shí)候，我們可能不需要單獨(dú)的文件，這時(shí)，我們就可以使用dataXML 方法來進(jìn)行數(shù)據(jù)的調(diào)用。使用dataXML提供數(shù)據(jù)dataXML 和dataURL都可以提供數(shù)據(jù)，dataURL是以把XML文件地址以URL的形式告訴FCF，如一個(gè)靜態(tài)的文件Data.xml，或者是一個(gè)動(dòng)態(tài)的文件，如mydata.jsp（頁面返回XML格式的文本）。dataXML則是以XML文本的形式告訴FCF。可能有點(diǎn)不好理解，看看下面的代碼就知道了。1. 2. 3. 4. 5. paramname=FlashVarsvalue=&dataXML= 6. 7. embedsrc=./FusionCharts/FCF_Column3D.swf?chartWidth=600&chartHeight=500flashVars=&dataXML=quality=highwidth=600height=500name=Column3Dtype=application/x-shockwave-flashpluginspage=/go/getflashplayer/ 8. 9. 10. 我們把上面的代碼保存到一個(gè)叫ChartDataXML.html的文件里。可以看到，F(xiàn)lashVars 的值是這樣的一種形式：在EMBED 標(biāo)記里，是這樣的： 而原來我們放到FlashVars的兩個(gè)參數(shù)-chartWidth，chartHeight，則被放到了SWF文件地址的后面。使用JavaScript和dataXML看下面的代碼。1. 2. 3. 4. 5. 6. 7. ThechartwillappearwithinthisDIV.Thistextwillbereplacedbythechart. 8. 9. varmyChart=newFusionCharts(./FusionCharts/FCF_Column3D.swf,myChartId,600,500); 10. myChart.setDataXML(); 11. 12. myChart.render(chartdiv); 13. 14. 15. 16. 17. 原來我們調(diào)用的是setDataURL()方法，而現(xiàn)在是setDataXML()方法，它的參數(shù)則是一個(gè)完整的XML字符串。不管我們使用什么方法，我們都能得到一樣的結(jié)果。setDataXML()方法的問題我們知道，在使用GET方法得到參數(shù)時(shí)，瀏覽器對(duì)參數(shù)值的長度是有一定的限制的，所以，如果XML字符過長，可能會(huì)產(chǎn)生問題。這時(shí)我們就需要使用setDataURL()方法。如果你的XML字符里含有雙字節(jié)字符，例如中文字符，你就不能使用setDataXML()方法，你應(yīng)該使用setDataURL()方法。最佳模式在我們的實(shí)際應(yīng)用里，數(shù)據(jù)不可能是靜態(tài)的，它可能是有用戶選擇查詢條件，然后提交給服務(wù)器，服務(wù)器返回一個(gè)查詢的結(jié)果，比如search.jsp?year=2008。所以我給大家推薦的最佳模式是使用setDataURL()方法，并且使用JavaScript來加載圖形。在使用setDataURL()方法時(shí)，如果地址里含有“?”、“&”等字符，你就需要對(duì)這個(gè)地址進(jìn)行URL編碼。在JavaScript里進(jìn)行編碼，使用escape(url)這個(gè)函數(shù)。如果你想在服務(wù)器端就進(jìn)行編碼，那就使用你的編程語言提供的URL編碼方法。在java里進(jìn)行編碼的函數(shù)是.URLEncoder.encode()。六、圖形的基本元素在我們了解了FCF的各種使用方法以后，我們就會(huì)發(fā)現(xiàn)，其實(shí)我們要做出各種不同的Flash圖形，最關(guān)鍵的就是那個(gè)XML數(shù)據(jù)。它不但可以描述圖形的數(shù)據(jù)，還可以描述圖形的樣式。大家可能迫不及待的想要了解XML的細(xì)節(jié)，別急，在此之前，我們需要搞清楚圖形的組成部分，比如什么是X軸，什么是Y軸，什么是圖形背景，什么是是圖形邊框。只有了解這些以后，我們才能做出我們相應(yīng)的圖形。圖形背景和畫布對(duì)于3D圖形，你可以設(shè)置canvas background（畫布背景）和Chart Background（圖形背景）的顏色，還可以設(shè)置它們是否可見。對(duì)于2D圖形，你可以設(shè)置canvas background color（畫布背景顏色），background 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è)置Trend Line（趨勢(shì)線），Zero Plane（零平面），Div Line（刻度線）等的一些屬性。Alternating（間隔色）你可以設(shè)置Alternating Colored Horizontal Grids（垂直表格間隔色）以及透明度，Alternating Colored Vertical Grids（水平表格間隔色）以及透明度。Hover Caption（提示信息）你可以設(shè)置hover caption background-提示框的背景，hover caption border提示框的邊框，ho