FusionCharts圖表插件開(kāi)發(fā)教程

1、FusionChartsFusionCharts圖表插件開(kāi)發(fā)教程圖表插件開(kāi)發(fā)教程目錄目錄FusionCharts Free介紹 FusionCharts Free安裝 FusionCharts Free我的第一個(gè)圖形 FusionCharts Free使用JavaScript加載圖形 FusionCharts Free使用dataXML加載數(shù)據(jù) FusionCharts Free圖形的基本元素 FusionCharts Free和XML FusionCharts Free和組合圖XML 動(dòng)態(tài)改變圖形的類(lèi)型和數(shù)據(jù) FCF中的下鉆 FCF中的基本數(shù)字格式 FCF中的特殊字符 間斷數(shù)據(jù)的處理 在JS

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

3、是一個(gè)跨平臺(tái)，跨瀏覽器的flash圖表組件解決方案，能夠被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 簡(jiǎn)單 HTML 頁(yè)面甚至PPT調(diào)用。你不需要知道任何關(guān)于flash編程的知識(shí)，你只需要知道你所用的編程語(yǔ)言就可以了。FusionCharts Free安裝安裝下載下載你可以在下面的地址下載它。http:/ Free（以下簡(jiǎn)稱(chēng)FCF）解壓到任意一個(gè)目錄后，點(diǎn)擊目錄下的index.html，就可以打開(kāi)FCF的文檔。這份文檔我們的網(wǎng)站上也有，地址是/demo/fusionchartsfree/。目錄結(jié)構(gòu)目錄結(jié)構(gòu)

4、現(xiàn)在我們就來(lái)看看這個(gè)下載包里面都有些什么東西。SWF文件文件（創(chuàng)建圖形主要靠它們了）所有的SWF文件（共22個(gè)）都在FusionChartsFreeCharts文件夾。如果你需要在你的web應(yīng)用里創(chuàng)建圖形，那么就把這些SWF文件都拷到你的應(yīng)用下面。FusionCharts JavaScript文件文件FusionCharts JavaScript文件放在FusionChartsFreeJSClass文件夾。這些文件能夠幫你用一種友好的方式把圖形嵌入到html頁(yè)面。示例代碼示例代碼所有的代碼都放在FusionChartsFreeCode文件夾。圖形例子圖形例子我們創(chuàng)建了一些圖形例子，放在Fusi

5、onChartsFreeGallery文件夾。你也可以通過(guò)文檔左邊的菜單Sample Charts來(lái)訪問(wèn)它。文檔文檔文檔就放在FusionChartsFreeContents文件夾，你可以直接點(diǎn)擊FusionChartsFree下面的index.html來(lái)訪問(wèn)。安裝安裝了解了下載包的目錄結(jié)構(gòu)以后，我們?cè)賮?lái)看看如何安裝FCF到web應(yīng)用里。只需要兩個(gè)步驟即可完成安裝。1、在你的web應(yīng)用根目錄下新建一個(gè)叫FusionCharts的文件夾。當(dāng)然，并不是說(shuō)它一定要叫這個(gè)名字，也不是一定要在根目錄下。2、把所有的SWF文件都拷貝到這個(gè)FusionCharts里。這就完成安裝了，不再需要其他多余的步驟。

6、當(dāng)然，有些情況下，并不需要與服務(wù)器的交互（比如，你直接使用JavaScript來(lái)嵌入，而不用jsp或php。數(shù)據(jù)也是直接寫(xiě)死在你的JavaScript代碼里或xml文件里。），為了學(xué)習(xí)方便，你也可以把它安裝在你的電腦上隨便一個(gè)地方，比如d:test下。安裝步驟和上面的安裝一樣。FusionCharts Free我的第一個(gè)圖形我的第一個(gè)圖形 要使用FCF來(lái)創(chuàng)建圖形，你需要做下面三件事情：1.選擇好你要?jiǎng)?chuàng)建的圖形類(lèi)型對(duì)應(yīng)的SWF文件。例如，我們現(xiàn)在要?jiǎng)?chuàng)建的是3D柱狀圖形，那么我們的SWF文件就是FCF_Column3D.swf。上篇文章已經(jīng)介紹過(guò)了，所有的SWF文件都放在FusionChartsF

7、reeCharts文件夾里。2.XML數(shù)據(jù)文件。FCF只接受基于XML格式的數(shù)據(jù)。因此，你需要把你的數(shù)據(jù)轉(zhuǎn)成XML格式。3.HTML文件。這個(gè)HTML文件將包含用來(lái)嵌入圖形的代碼。在我們進(jìn)行上面的工作之前，我們先要新建一個(gè)文件夾。例如，我們創(chuàng)建一個(gè)叫c:FusionCharts 的文件夾。以后我們的例子都放到這個(gè)里面。對(duì)于我們的第一個(gè)例子來(lái)說(shuō)，我們將在c:FusionCharts下再建一個(gè)叫MyFirstChart的文件夾。設(shè)置設(shè)置SWF文件文件我們還要在c:FusionCharts下建一個(gè)叫FusionCharts的文件夾?，F(xiàn)在，我們把所有的SWF文件都拷貝到到這個(gè)文件下面（c:Fusion

8、ChartsFusionCharts）。以后，我們所有例子的代碼，都要引用這個(gè)文件夾下面的SWF文件。好了，SWF文件就設(shè)置好了。創(chuàng)建創(chuàng)建XML數(shù)據(jù)文檔數(shù)據(jù)文檔要做報(bào)表，當(dāng)然要有數(shù)據(jù)了。在這個(gè)例子里，我們準(zhǔn)備展示一年里每個(gè)月的銷(xiāo)售情況。所有數(shù)據(jù)看起來(lái)就像下面的表格中的一樣。我們知道，F(xiàn)CF只接受XML格式的數(shù)據(jù)，其他如Excel，CSV，text等都不行?，F(xiàn)在我們按照上表中的數(shù)據(jù)，做成一個(gè)叫Data.xml的XML文件，保存在c:FusionChartsMyFirstChart文件夾下。這個(gè)文件的內(nèi)容如下： . 上面的代碼里，有一個(gè)叫的root元素，它還有一些屬性，用來(lái)定義標(biāo)題，坐標(biāo)軸，數(shù)值格

9、式。我們還看到有很多元素，它用來(lái)描述數(shù)據(jù)。name屬性用來(lái)表示月份名稱(chēng)，value屬性表示銷(xiāo)售額，color屬性表示圖形顏色。創(chuàng)建包含圖形的創(chuàng)建包含圖形的HTML文件文件每個(gè)圖形都要被放到HTML文件里才能顯示，現(xiàn)在，我們把下面的代碼保存c:FusionChartsMyFirstChartChart.html文件里。 My First FusionCharts 上面的代碼，其實(shí)就是一個(gè)顯示flash的簡(jiǎn)單標(biāo)記。movie參數(shù)值指定我們的SWF文件，即FCF_Column3D.swf。FlashVars參數(shù)值用來(lái)指定XML文件的路徑以及圖形的寬和高?？吹竭@里，如果不熟悉在網(wǎng)頁(yè)里調(diào)用Flash的朋

10、友，可能會(huì)有點(diǎn)迷惑，因?yàn)槲覀儼l(fā)現(xiàn)有一個(gè)embed參數(shù)，它的各個(gè)值都和param參數(shù)的值是一樣的，為什么會(huì)這樣呢？其實(shí)，這是為了在不同的瀏覽器里都能運(yùn)行Flash的一個(gè)解決辦法。IE瀏覽器是使用param參數(shù)來(lái)運(yùn)行Flash的，而Netscape則是使用embed參數(shù)來(lái)運(yùn)行Flash。因此，為了保證我們的應(yīng)用能夠在大多數(shù)瀏覽器上運(yùn)行，我們就需要加上embed參數(shù)，并且值和param完全相同。好了，所有工作都做完了，現(xiàn)在，你可以用IE打開(kāi)Chart.html，就能看到你的第一個(gè)漂亮的Flash圖形了。問(wèn)題問(wèn)題如果你很不幸，沒(méi)有在頁(yè)面上看到圖形，那么可能是下面的原因之一：1.SWF 沒(méi)有放到正確的文

11、件夾。2.在Chart.html里，SWF的路徑設(shè)置不正確。3.沒(méi)有安裝Flash Player。4.沒(méi)有啟用瀏覽器Flash播放選項(xiàng)。如果你得到了一個(gè)“Error in Loading Data”的消息，可能是：1.Data.xml文件沒(méi)放到正確的文件夾。2.Data.xml的文件名不正確。比如，你可能不小心把它命名為Data.xml.txt。如果你得到了一個(gè)“Invalid XML Data”的消息，可能是;1.Data.xml里的內(nèi)容有錯(cuò)誤。到這里，第一個(gè)圖表就做完了，感覺(jué)怎么樣？你是覺(jué)得簡(jiǎn)單呢，容易呢，還是小Case呢？不過(guò)，這里我有個(gè)小問(wèn)題，就是Data.xml里，yAxisName

12、屬性如果是中文的話，顯示不出來(lái)。希望隨著教程的繼續(xù)，我進(jìn)一步了解FCF以后，可以解決這個(gè)小問(wèn)題，也許它就是BUG。圖形轉(zhuǎn)換圖形轉(zhuǎn)換上面的圖形是一個(gè)柱形圖，如果我們想用同樣的數(shù)據(jù)，以餅圖來(lái)展示，我們只需要將Chart.html代碼中的“FCF_Column3D.swf”改成餅圖的SWF文件就可以了，即“FCF_Pie3D.swf”?，F(xiàn)在我們?cè)偎⑿聻g覽器，看看效果：FusionCharts Free使用使用JavaScript加載圖形加載圖形在上篇文章里，我們做出了第一個(gè)圖形報(bào)表，我們是直接在HTML里使用和標(biāo)記來(lái)加載圖形的。 . . 實(shí)際上，我們還可以使用FCF提供的一個(gè)JavaScript類(lèi)來(lái)

13、加載圖形。使用JavaScript的方式有幾個(gè)好處，一是代碼量大大減少，特別是當(dāng)一個(gè)頁(yè)面上有幾個(gè)圖形時(shí)。二是代碼更加直觀。三是可以避免IE出現(xiàn)“單擊以激活使用這個(gè)控件”的提示。使用使用JS加載加載這個(gè)JS類(lèi)文件就在FusionChartsFreeJSClass文件夾下，我們把它拷貝到c:FusionChartsFusionCharts下面?，F(xiàn)在，我們把原來(lái)的Chart.html復(fù)制一份，命名為JSChart.html。這樣做是為了避免直接在Chart.html上進(jìn)行修改，因?yàn)橐院筮€要用到Chart.html，下面就是JSChart.html的代碼。 圖形將出現(xiàn)這個(gè)DIV里，到時(shí)這里的字將被圖形

14、替代。 var myChart = new FusionCharts(./FusionCharts/FCF_Column3D.swf, myChartId, 600, 500); myChart.setDataURL(Data.xml); myChart.render(chartdiv); 我們對(duì)上面的代碼進(jìn)行以下解釋。首先，我們用下面的語(yǔ)句來(lái)加載FusionCharts.js文件。 然后，我們定義了一個(gè)DIV，它還有個(gè)id。圖形將出現(xiàn)這個(gè)DIV里，到時(shí)這里的字將被圖形替代。 我們的圖形就出現(xiàn)在這個(gè)DIV里。接著，我們用四個(gè)參數(shù)建立了一個(gè)FusionCharts對(duì)象，var myChart =

15、 new FusionCharts(./FusionCharts/FCF_Column3D.swf, myChartId, 600, 500); 第一個(gè)參數(shù)是SWF文件的地址。第二個(gè)是圖形的id。這個(gè)id你可以隨便叫什么，但是要注意，在后面我們講到一個(gè)頁(yè)面里有多個(gè)圖形的時(shí)候，這個(gè)id一定要是唯一的。第三個(gè)參數(shù)是圖形的寬。第四個(gè)參數(shù)是圖形的高。我們還要設(shè)置數(shù)據(jù)文件的地址。myChart.setDataURL(Data.xml); 最后，我們把圖形渲染在指定的地方。myChart.render(chartdiv); chartdiv就是前面的DIV的id，這就表示把圖形render到chartdi

16、v。現(xiàn)在你運(yùn)行JSChart.html，你會(huì)看到同Chart.html一樣的效果。很顯然使用JavaScript加載圖形，更方便，更直觀。多圖形多圖形有時(shí)候我們需要在一個(gè)頁(yè)面里顯示多個(gè)圖形，例如，我們同時(shí)以餅圖、柱狀圖、曲線圖、區(qū)域圖四中形式來(lái)表現(xiàn)每個(gè)月的銷(xiāo)售情況，讓用戶(hù)想看哪個(gè)就看哪個(gè)。 多圖形 First Chart Container Pie 3D var myChart1 = new FusionCharts(./FusionCharts/FCF_pie3D.swf, myChartId1, 600, 400); myChart1.setDataURL(Data.xml); myCha

17、rt1.render(chartdiv1); Second Chart Container Column 3D var myChart2 = new FusionCharts(./FusionCharts/FCF_Column3D.swf,myChartId2, 600,300); myChart2.setDataURL(Data.xml); myChart2.render(chartdiv2); Third Chart Container Line 2D var myChart3 = new FusionCharts(./FusionCharts/FCF_line.swf, myChartI

18、d3, 600, 300); myChart3.setDataURL(Data.xml); myChart3.render(chartdiv3); Fourth Chart Container Area 2D var myChart4 = new FusionCharts(./FusionCharts/FCF_area2D.swf, myChartId4, 400, 250); myChart4.setDataURL(Data.xml); myChart4.render(chartdiv4); 仔細(xì)對(duì)比上面的四個(gè)圖形代碼，其實(shí)就是div的id，F(xiàn)usionCharts對(duì)象的名稱(chēng),圖形的id，還

19、有圖形的SWF地址這些地方發(fā)生了變化。最后的效果如下：使用使用dataXML提供數(shù)據(jù)提供數(shù)據(jù)dataXML 和dataURL都可以提供數(shù)據(jù)，dataURL是以把XML文件地址以URL的形式告訴FCF，如一個(gè)靜態(tài)的文件Data.xml，或者是一個(gè)動(dòng)態(tài)的文件，如mydata.jsp（頁(yè)面返回XML格式的文本）。dataXML則是以XML文本的形式告訴FCF?？赡苡悬c(diǎn)不好理解，看看下面的代碼就知道了。 param name=FlashVars value=&dataXML= embed src=./FusionCharts/FCF_Column3D.swf?chartWidth=600&am

20、p;chartHeight=500 flashVars=&dataXML= quality=high width=600 height=500 name=Column3D type=application/x-shockwave-flash pluginspage=http:/ / 我們把上面的代碼保存到一個(gè)叫ChartDataXML.html的文件里?？梢钥吹剑現(xiàn)lashVars 的值是這樣的一種形式：在EMBED 標(biāo)記里，是這樣的： 而原來(lái)我們放到FlashVars的兩個(gè)參數(shù)-chartWidth，chartHeight，則被放到了SWF文件地址的后面。使用使用JavaScript

21、和和dataXML The chart will appear within this DIV. This text will be replaced by the chart. var myChart = new FusionCharts(./FusionCharts/FCF_Column3D.swf, myChartId, 600, 500); myChart.setDataXML(); myChart.render(chartdiv); 原來(lái)我們調(diào)用的是setDataURL()方法，而現(xiàn)在是setDataXML()方法，它的參數(shù)則是一個(gè)完整的XML字符串。不管我們使用什么方法，我們都能得

22、到一樣的結(jié)果。setDataXML()方法的問(wèn)題方法的問(wèn)題我們知道，在使用GET方法得到參數(shù)時(shí)，瀏覽器對(duì)參數(shù)值的長(zhǎng)度是有一定的限制的，所以，如果XML字符過(guò)長(zhǎng)，可能會(huì)產(chǎn)生問(wèn)題。這時(shí)我們就需要使用setDataURL()方法。如果你的XML字符里含有雙字節(jié)字符，例如中文字符，你就不能使用setDataXML()方法，你應(yīng)該使用setDataURL()方法。最佳模式最佳模式在我們的實(shí)際應(yīng)用里，數(shù)據(jù)不可能是靜態(tài)的，它可能是有用戶(hù)選擇查詢(xún)條件，然后提交給服務(wù)器，服務(wù)器返回一個(gè)查詢(xún)的結(jié)果，比如search.jsp?year=2008。所以我給大家推薦的最佳模式是使用setDataURL()方法，并且使用

23、JavaScript來(lái)加載圖形。在使用setDataURL()方法時(shí)，如果地址里含有“?”、“&”等字符，你就需要對(duì)這個(gè)地址進(jìn)行URL編碼。在JavaScript里進(jìn)行編碼，使用escape(url)這個(gè)函數(shù)。如果你想在服務(wù)器端就進(jìn)行編碼，那就使用你的編程語(yǔ)言提供的URL編碼方法。在java里進(jìn)行編碼的函數(shù)是.URLEncoder.encode()。FusionCharts Free圖形的基本元素圖形的基本元素圖形背景和畫(huà)布圖形背景和畫(huà)布 對(duì)于3D圖形，你可以設(shè)置canvas background（畫(huà)布背景）和Chart Background（圖形背景）的顏色，還可以設(shè)置它們是否可見(jiàn)。

24、對(duì)于2D圖形，你可以設(shè)置canvas background color（畫(huà)布背景顏色），background alpha（背景透明度），canvas border color（畫(huà)布邊框顏色），canvas border thickness（畫(huà)布邊框厚度）等屬性。 Chart Labels（圖形標(biāo)簽）（圖形標(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ù)值前綴）

25、, 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-提

26、示框的背景，hover caption border提示框的邊框，hover caption data separator character-提示信息的分割字符。Anchors（錨點(diǎn)）（錨點(diǎn)） 你可以設(shè)置Anchors（錨點(diǎn)）的shape（形狀）, radius（半徑）, border color（邊框顏色）, thickness（邊框厚度）, alpha（邊框透明度）, background color（背景顏色）, background alpha（背景透明度） 等屬性。FusionCharts Free和和XML 數(shù)據(jù)類(lèi)型數(shù)據(jù)類(lèi)型在FCF里，一共有四種數(shù)據(jù)類(lèi)型。Boolean - 它的

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

28、兩年的每月銷(xiāo)售情況。我們看看下面的例子。 上面的代碼里多了一些我們沒(méi)接觸過(guò)的屬性，沒(méi)關(guān)系，在圖形XML參考一章我們將詳細(xì)介紹所有的圖形可用的屬性。下面進(jìn)行一下簡(jiǎn)單的解釋元素是所有FCF XML文檔的主元素。它描述數(shù)據(jù)的開(kāi)始和結(jié)束。它還有一些屬性可以控制圖形。這些屬性我們?cè)趫D形XML參考一章會(huì)講到。元素是的子元素，它描述一個(gè)數(shù)據(jù)集，這個(gè)數(shù)據(jù)集決定了圖形上的數(shù)據(jù)。一個(gè)典型的元素看起來(lái)就像這樣： 元素，它可以在圖形上畫(huà)出一條趨勢(shì)線。例如，下面的代碼里，我們?cè)?6000這個(gè)值畫(huà)出了一條線，用來(lái)表示月平均銷(xiāo)售額。 多系列圖形多系列圖形多系列圖形被用來(lái)比較兩個(gè)或更多的數(shù)據(jù)集。我們看看下面的代碼。 我們發(fā)現(xiàn)

29、，上面多了一個(gè) 元素，它包含很多的子元素，如 每個(gè)就表示X軸上的一個(gè)名稱(chēng)。上面還有兩個(gè)元素，一個(gè)用來(lái)表示2006年的數(shù)據(jù)，一個(gè)表示2005年。每個(gè)則表示圖形上的一個(gè)數(shù)據(jù)。注意的子元素的數(shù)量應(yīng)該和子元素的一致。 下一章我們來(lái)看看組合圖的XML。FusionCharts Free和組合圖和組合圖XML 什么是組合圖形什么是組合圖形當(dāng)我們想在一張圖形里表示多個(gè)圖形類(lèi)型時(shí)，我們就要用到組合圖。FCF提供了雙Y軸組合圖，它有兩個(gè)Y軸，每個(gè)軸表示不同的刻度（例如，收益和數(shù)量，或者訪問(wèn)量和下載量等等。）。圖形左邊的坐標(biāo)軸叫主坐標(biāo)軸，圖形右邊的叫次坐標(biāo)軸。FCF里組合圖分為2D和3D，下面的圖形就是一個(gè)2D雙

30、Y軸組合圖。 這個(gè)圖里有月銷(xiāo)售額和數(shù)量，X軸表示月份。現(xiàn)在我們來(lái)看看這兩個(gè)Y軸：主Y軸表示2005和2006的銷(xiāo)售額，柱狀圖和這個(gè)主Y軸對(duì)應(yīng)。次Y軸表示數(shù)量，曲線圖和次Y軸對(duì)應(yīng)。在雙Y軸圖形里，我們必須提供至少兩個(gè)數(shù)據(jù)集，一個(gè)對(duì)應(yīng)主Y軸，一個(gè)對(duì)應(yīng)次Y軸。如果你沒(méi)有提供兩個(gè)，圖形就不會(huì)正確顯示。 代碼代碼上圖的XML代碼如下： 簡(jiǎn)單解釋簡(jiǎn)單解釋這個(gè)組合圖的XML和一個(gè)多系列圖形的XML較為類(lèi)似，因此，我們只解釋以下不同的地方。在雙Y軸組合圖里，有兩個(gè)Y軸，每個(gè)Y軸都可以有它自己的刻度和數(shù)值格式屬性。PYAxisName表示主軸的名稱(chēng)，SYAxisName表示次軸的名稱(chēng)。在每個(gè)數(shù)據(jù)集里，我們都必須

31、用parentYAxis屬性來(lái)指定它是屬于哪個(gè)軸。這個(gè)屬性的值只能是“P”或“S”。P代表主軸，S代表次軸。例如我們的代碼里，在主軸上有兩個(gè)銷(xiāo)售額數(shù)據(jù)集-“2005”和“2006”： . 在次軸上有一個(gè)數(shù)量數(shù)據(jù)集： 上面的例子里，數(shù)量數(shù)據(jù)集表示的是2005和2006當(dāng)月數(shù)量的總數(shù)。實(shí)際上，我們可以在次軸上也設(shè)置兩個(gè)數(shù)據(jù)集，一個(gè)表示2005年每月的數(shù)量，一個(gè)表示2006年的。大家可以自己練習(xí)一下。注意注意在運(yùn)行這個(gè)例子是，F(xiàn)lash文件應(yīng)該使用FCF_MSColumn2DLineDY.swf，從上圖我們可以看出，它是column和line的組合，因此要用FCF_MSColumn2DLineDY.

32、swf。更多的圖形和Flash文件的對(duì)應(yīng)關(guān)系，請(qǐng)參見(jiàn)/hot/fusioncharts/816.html動(dòng)態(tài)改變圖形的類(lèi)型動(dòng)態(tài)改變圖形的類(lèi)型在項(xiàng)目中，我們有時(shí)會(huì)需要在頁(yè)面上方便地改變圖形的類(lèi)型，當(dāng)然，如果頁(yè)面不刷新就能看到改變的結(jié)果，那是最理想的。舉個(gè)例子來(lái)說(shuō)，在一個(gè)頁(yè)面上，顯示了一個(gè)月銷(xiāo)售額的柱狀圖，但用戶(hù)要求還可以查看月銷(xiāo)售額的餅圖，區(qū)域圖。要實(shí)現(xiàn)這個(gè)需求，一般的做法是，再做兩個(gè)頁(yè)面，一個(gè)顯示餅圖，一個(gè)顯示區(qū)域圖，用戶(hù)想看這兩個(gè)圖，點(diǎn)擊連接就可以了。這樣的做法并沒(méi)有什么不妥。你還可以采用AJAX技術(shù)，來(lái)實(shí)現(xiàn)頁(yè)面無(wú)刷新，這樣用戶(hù)的體驗(yàn)會(huì)更好一些。只是程序員累一點(diǎn)

33、而已。難道我們一定要這么累嗎？不！其實(shí)我們可以有更好的辦法，前提是你采用了FCF作為你的報(bào)表解決方案。那么，在FCF里，是怎么實(shí)現(xiàn)上面的需求的呢？簡(jiǎn)單點(diǎn)說(shuō)，思路是這樣的：1、使用JavaScript加載第一個(gè)圖形（如柱狀圖），至于是用dataXML方法，還是dataURL方法，都可以。2、當(dāng)需要改變圖形類(lèi)型（如改成餅圖）時(shí)，我們?cè)賱?chuàng)建一個(gè)新的FusionCharts類(lèi)實(shí)例（它的SWF文件是餅圖），把它render到原來(lái)的DIV。就是這么簡(jiǎn)單。我們來(lái)看看代碼吧。 /數(shù)據(jù) var strXML = ; /* * 當(dāng)用戶(hù)單擊按鈕時(shí)調(diào)用這個(gè)方法。 * 這個(gè)方法用來(lái)使用新的SWF文件創(chuàng)建一個(gè)新的Fusi

34、onCharts實(shí)例。 */ function updateChart(chartSWF) /Create another instance of the chart. var chart1 = new FusionCharts(chartSWF, chart1Id, 400, 300, 0, 0); chart1.setDataXML(strXML); chart1.render(chart1div); FusionCharts var chart1 = new FusionCharts(././FusionCharts/FCF_Column3D.swf, chart1Id, 400, 30

35、0, 0, 0); chart1.setDataXML(strXML); chart1.render(chart1div); Show as: 動(dòng)態(tài)改變圖形的數(shù)據(jù)動(dòng)態(tài)改變圖形的數(shù)據(jù)我們已經(jīng)會(huì)動(dòng)態(tài)改變圖形的類(lèi)型了，動(dòng)態(tài)改變數(shù)據(jù)和上面的原來(lái)一樣，我們只需要在新建實(shí)例的時(shí)候，傳入新的數(shù)據(jù)就可以了。那么為什么還要單獨(dú)來(lái)講解這個(gè)呢？因?yàn)镕CF給我們提供了一個(gè)更簡(jiǎn)單的方法，那就是updateChartXML(domid,data)。它的第一個(gè)參數(shù)就是我們?cè)趧?chuàng)建FusionCharts實(shí)例時(shí)設(shè)置的圖形domid，第二個(gè)參數(shù)是XML數(shù)據(jù)字符。來(lái)看看下面的代碼。 FusionCharts Free &

36、JavaScript - Updating chart using setDataXML() Method function updateChart(DOMId) updateChartXML(domId,); FusionCharts var chart1 = new FusionCharts(././FusionCharts/FCF_Column3D.swf, chart1Id, 400, 300); chart1.setDataXML(); chart1.render(chart1div); 當(dāng)我們單擊”改變數(shù)據(jù)“按鈕后，會(huì)調(diào)用updateChart()方法，它會(huì)使用新的數(shù)據(jù)來(lái)重新構(gòu)建圖

37、形。這種方案看起來(lái)，好像是比較好。然而，在前面我們說(shuō)了，使用dataXML方法加載數(shù)據(jù)時(shí)，不能含有中文字符，同理，使用updateChartXML方法，也不能有中文字符。如果你要使用中文，還是用第一種方法吧。你可能會(huì)想，既然有updateChartXML方法，那是不是有updateChartURL方法呢？我們用它不就可以了嗎？是的，是有這個(gè)方法，不過(guò)，F(xiàn)usionCharts Free版本里沒(méi)有，只有FusionCharts版本里有。FCF中的下鉆中的下鉆 在我們開(kāi)發(fā)圖形報(bào)表時(shí)，你可能會(huì)遇到這樣的需求：用戶(hù)要求點(diǎn)擊柱狀圖的某根柱子，可查看它的詳細(xì)數(shù)據(jù)。其他的一些基于java的圖形報(bào)表組件，如j

38、freechart，也可以實(shí)現(xiàn)加連接的功能，但是使用起來(lái)還是有點(diǎn)麻煩的。其實(shí)它不光是加連接麻煩，正個(gè)使用起來(lái)都很麻煩，需要你在后臺(tái)編寫(xiě)大量的代碼。通過(guò)前面的章節(jié)，你應(yīng)該知道，F(xiàn)CF的使用非常簡(jiǎn)單，你只需要關(guān)注你的數(shù)據(jù)如何產(chǎn)生就可以了。至于如何產(chǎn)生圖形，并不需要你編一行代碼。加連接也是如此。 FCF支持三種類(lèi)型的連接： 1、普通的超鏈接，在同一個(gè)窗口打開(kāi)新的頁(yè)面。 2、普通的超鏈接，在新窗口打開(kāi)新的頁(yè)面。 3、JavaScript連接。 普通的超鏈接普通的超鏈接 我們先來(lái)看看第一種情況。 想要在FCF圖形里加連接，你只需要在數(shù)據(jù)集里加上一個(gè)link屬性即可。如下： 我們發(fā)現(xiàn)URL是經(jīng)過(guò)了編碼的。

39、是的，因?yàn)槟愕倪B接里可能會(huì)含有“?”，“&”等字符，所以需要編碼。FCF在載入這個(gè)連接時(shí)，會(huì)對(duì)它進(jìn)行解碼，解碼后上例中的連接就是“ShowDetails.asp?Month=Jan”。 我們看一個(gè)完整的例子。 新窗口超鏈接新窗口超鏈接如果你想在一個(gè)新的窗口打開(kāi)頁(yè)面，只需要在連接的前面加上“n-”，就像下面的代碼一樣： JavaScript連接連接 我們還可以加上JavaScript連接，在連接里，你可以調(diào)用任何在本頁(yè)可以調(diào)用到的JavaScript函數(shù)。如下：1. 下圖是一個(gè)點(diǎn)擊連接后彈出提示框的例子。 FCF中的基本數(shù)字格式中的基本數(shù)字格式 控制小數(shù)位位數(shù)控制小數(shù)位位數(shù)所有的FCF圖

40、形都支持decimalPrecision屬性，這個(gè)屬性是用來(lái)指定小數(shù)位的位數(shù)的。如果你沒(méi)有指定這個(gè)屬性的值，那么FCF默認(rèn)會(huì)顯示小數(shù)位后面2位小數(shù)。這個(gè)屬性是全局的，也就是說(shuō)，它對(duì)這個(gè)圖形上的所有數(shù)字都起作用。例如，如果你設(shè)置decimalPrecision=0，那么像這些12.432，13.4，13，就會(huì)顯示成12，13，13。 同樣的，如果你有0.12432，0.134 ， 0.13等數(shù)據(jù)，并且沒(méi)有指定decimalPrecision的值，那么FCF就會(huì)顯示成0.12，0.13，0.13。如果你把decimalPrecision設(shè)置成4，那么就會(huì)顯示成0.1243，0.1340，0.130

41、0。 自動(dòng)格式化數(shù)字自動(dòng)格式化數(shù)字FCF會(huì)自動(dòng)的給你的數(shù)字加上K（千）或M（百萬(wàn)），如下圖。 上圖中，三個(gè)數(shù)字分別代表12500，13400，13300。FCF會(huì)自動(dòng)地把這些數(shù)字轉(zhuǎn)化為以千為單位，或是以百萬(wàn)為單位。如果你不想這樣，你就加上如下的代碼：1. 效果如下： 現(xiàn)在顯示的是全部的數(shù)字了。不過(guò)，它還加了一些逗號(hào)來(lái)分隔這些數(shù)字。如果你不喜歡這樣，你就加上formatNumber=0。但是，如果設(shè)置了formatNumber=0，那么就不能格式化小數(shù)位了。看起來(lái)代碼就像這樣：1. 效果是這樣： 自定義千分位和小數(shù)分隔符自定義千分位和小數(shù)分隔符FCF默認(rèn)使用“.”作為小數(shù)分隔符，使用“,”作為千

42、分位分隔符。這也是我們的使用習(xí)慣。如果你想改成其他的，也可以。我們使用decimalSeparator 指定小數(shù)分隔符，使用thousandSeparator 指定千分位分隔符。例如，我們想把小數(shù)分隔符和千分位分隔符調(diào)換一下：1. 效果如下： 增加數(shù)字前綴和后綴增加數(shù)字前綴和后綴FCF允許我們給所有的數(shù)字都加上前綴和后綴。如果我們?cè)O(shè)置numberPrefix=$，那么會(huì)在所有的數(shù)字前面就會(huì)加上“$”，就像這樣：$40000, $50000。如果我們?cè)O(shè)置numberSuffix=%25，那么會(huì)在所以的數(shù)字后面加上“%”，就像這樣：43%，39%。 我們注意到，“%”是經(jīng)過(guò)了編碼的。在FCF里，一

43、些特殊的編碼都需要經(jīng)過(guò)編碼。下一章我們會(huì)詳細(xì)介紹特殊字符。FCF中的特殊字符中的特殊字符 歐元符號(hào)歐元符號(hào)在FCF里顯示“”，你需要用“%80”來(lái)替換它。如下： 上面的代碼會(huì)在數(shù)字前面都加上“”。英鎊符號(hào)英鎊符號(hào)在FCF里顯示“”，你需要用“%A3”來(lái)替換它。如下： 上面的代碼會(huì)在數(shù)字前面都加上“”。人民幣符號(hào)人民幣符號(hào)在FCF里顯示“￥”，你需要用“%A5”來(lái)替換它。如下： 上面的代碼會(huì)在數(shù)字前面都加上“￥”。分符號(hào)分符號(hào)在FCF里顯示“”，你需要用“%A2”來(lái)替換它。如下： 上面的代碼會(huì)在數(shù)字后面都加上“”。百分號(hào)符號(hào)百分號(hào)符號(hào)在FCF里顯示“%”，你需要用“%25”來(lái)替換它。如下： 上面的代碼會(huì)在數(shù)字后面都加上“%”。&符號(hào)符號(hào)在FCF里顯示“&”，你需要用“&”來(lái)替換它。如下： 上面的代碼標(biāo)題顯示為“Total of 2003 & 2004”。符號(hào)符號(hào)在FCF里顯示“”，你需要用“>”來(lái)替換它。如下： 10 value=523 color=8BBA00 / 上面的代碼最后一個(gè)數(shù)字顯示為“10”。如果要顯示“”，你可能以為用“<”就可以了，事實(shí)是不可能的。我還沒(méi)試驗(yàn)出怎么才能顯示“”，也許沒(méi)有這個(gè)必要。單引號(hào)