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

標籤：style   blog   http   color   java   使用   os   io   

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

一、FusionCharts簡單介紹和安裝使用                                                                                            1．1、簡單介紹       FusionCharts是InfoSoft Global公司的一個產品,而FusionCharts Free則是FusionCharts提供的一個免費版本號碼，儘管免費，功能依舊強大，圖形類型依舊豐富。這裡介紹了都是基於FusionCharts Free的。

       FusionCharts free 是一個跨平台，跨瀏覽器的flash圖表組件解決方式，可以被 ASP、.NET, PHP, JSP, ColdFusion, Ruby on Rails, 簡單 HTML 頁面甚至PPT調用。我們不須要知道不論什麼Flash的知識，僅僅須要瞭解你所用的程式設計語言而已。

       FusionCharts功能強大，那麼它究竟可以做什麼呢？以下一一展示。

       3D/2D 直條圖

       曲線圖

       3D/2D餅圖、環圖

       地區圖

       堆棧圖

       聯合圖

       上面僅僅是一些功能的展示，FusionCharts還可以做很多其它的事情，這裡就不一一介紹了。以下介紹怎樣安裝使用FusionCharts。

       1.2 文檔結構

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

          Charts ：裡麵包括著全部的SWF檔案，假設你的Web項目須要建立映像，則匯入對應的SWF檔案就可以。

          Code ：裡麵包括了全部的示範範例代碼。

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

          Gallery ：包括了一些映像的建立範例。

          JSClass：FusionCharts javascript檔案就放在這個目錄下，這些檔案可以幫組我們以一種友好的方式將映像插入到頁面中。

       1.3安裝使用

       在瞭解了FusionCharts的文檔結構後，以下來解說怎樣將FusionCharts應用到應用程式中。事實上FusionCharts的用法非常easy。僅僅須要三個步驟就行搞定。

       1、 匯入你要建立映像相對應的SWF檔案。

       2、 編寫XML資料檔案。

       3、 編寫HTML檔案，這個檔案要包括顯示映像的對應代碼。

       二、我的第一個FusionCharts                                                                                       

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

       2.1、建立project

       建立目錄，命名為FusionCharts，然後在建立兩個目錄分別命名為FusionCharts、datas。這兩個檔案分別用於存放SWF檔案和xml資料檔案。

       2.2、匯入檔案

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

       2.3、建立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.4、編寫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載入資料。