FusionCharts簡單教程（一）---創建第一個FusionCharts圖形

時間 2019-11-11

標籤 fusioncharts 簡單教程創建第一個圖形简体版

原文原文鏈接

由於項目需求需要作一個報表，選擇FusionCharts做爲工具使用。由於曾經沒有接觸過報表，網上也沒有比較具體的fusionCharts教程，因此決定好好研究FusionCharts，同一時候作一個比較簡單的教程提供參考。由於能力有限(應屆畢業生的菜鳥而已)，因此教程(學習筆記而已)難免會有錯誤，望別噴，望指正。固然確定避免不了會參考其它資料的。javascript

1、FusionCharts簡單介紹和安裝使用

1．一、簡單介紹

FusionCharts是InfoSoft Global公司的一個產品,而FusionCharts Free則是FusionCharts提供的一個免費版本號，儘管免費，功能依舊強大，圖形類型依舊豐富。這裏介紹了都是基於FusionCharts Free的。

FusionCharts free 是一個跨平臺，跨瀏覽器的flash圖表組件解決方式，能夠被 ASP、.NET, PHP, JSP, ColdFusion, Ruby on Rails, 簡單 HTML 頁面甚至PPT調用。咱們不需要知道不論什麼Flash的知識，僅僅需要了解你所用的編程語言而已。html

FusionCharts功能強大，那麼它究竟能夠作什麼呢？如下一一展現。java

3D/2D 柱形圖編程

曲線圖

3D/2D餅圖、環圖瀏覽器

區域圖app

堆棧圖編程語言

聯合圖工具

上面僅僅是一些功能的展現，FusionCharts還能夠作不少其它的事情，這裏就不一一介紹了。如下介紹怎樣安裝使用FusionCharts。學習

1.2 文檔結構

將下載的FusionCharts解壓到隨意目錄，獲得的解壓目錄裏面會包括類似於此的文檔結構。spa

Charts ：裏面包括着所有的SWF文件，假設你的Web項目需要建立圖像，則導入對應的SWF文件就能夠。

Code ：裏面包括了所有的演示樣例代碼。

Contents ：包括了文檔，也就是API，包括了FusionCharts的用法。

Gallery ：包括了一些圖像的建立樣例。

JSClass：FusionCharts javascript文件就放在這個目錄下，這些文件能夠幫組咱們以一種友好的方式將圖像插入到頁面中。

1.3安裝使用

在瞭解了FusionCharts的文檔結構後，如下來解說怎樣將FusionCharts應用到應用程序中。事實上FusionCharts的用法很是easy。僅僅需要三個步驟就行搞定。

一、導入你要建立圖像相對應的SWF文件。

二、編寫XML數據文件。

三、編寫HTML文件，這個文件要包括顯示圖像的對應代碼。

2、個人第一個FusionCharts

介紹了這麼久，最終能夠建立第一個圖像了。我將以一種比較簡單的方式來建立一個3D柱狀的圖形，用來顯示每個月某件商品的銷售狀況。

2.一、建立project

新建目錄，命名爲FusionCharts，而後在新建兩個目錄分別命名爲FusionCharts、datas。這兩個文件分別用於存放SWF文件和xml數據文件。

2.二、導入文件

將對應的3D柱狀圖像的SWF：Column3D.swf拷貝到FusionCharts目錄中。

2.三、建立XML數據文件

建立XML文件：Data1.xml，並將其放入到datas目錄中。文件內容例如如下：

<chart yAxisName='銷售個數' caption='2012年年度銷售狀況統計分析' useRoundEdges='1' bgColor='FFFFFF,FFFFFF' showBorder='0'>
    <set label='一月' value='25000'  /> 
    <set label='二月' value='35000' /> 
    <set label='三月' value='42300' /> 
    <set label='四月' value='35300' /> 
    <set label='五月' value='31300' />
    <set label='六月' value='25000'  /> 
    <set label='七月' value='35000' /> 
    <set label='八月' value='42300' /> 
    <set label='九月' value='35300' /> 
    <set label='10月' value='31300' />
    <set label='11月' value='25000'  /> 
    <set label='12月' value='35000' /> 
</chart>

對於這個XML文件這裏簡單介紹一下。

<chart>元素做爲root元素，他有一些基本屬性，如：設置x、y軸名稱，報表標題、數值格式。在<chart>元素中有很是多的<set>元素，這個元素用來描寫敘述設定的數據，label表示名稱、value表示值。

2.四、編寫HTML文件代碼

	<html>   
	   <head>   
	      <title>My First FusionCharts</title>   
	   </head>   
	   <body bgcolor="#ffffff">   
	      <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D" >   
	         <param name="movie" value="../FusionCharts/Column3D.swf" />   
	         <param name="FlashVars" value="&dataURL=../datas/Data.xml&chartWidth=600&chartHeight=500">   
	         <param name="quality" value="high" />   
			<embed src="../FusionCharts/Column3D.swf" flashVars="&dataURL=../datas/Data.xml&chartWidth=600&chartHeight=500" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />   
	      </object>   
	</body>   
</html>

生成的圖像：

下篇將介紹怎樣使用js來載入FusionCharts和使用dataXML載入數據。