FusionChart使用1
一、 FusionCharts構成的基本三要素：swf，data，承載圖表的載體。
Swf：Charts文件夾下面的所有swf文件，需要什么樣的圖表樣式，就加在與之相對應的swf文件。
Data：數據源。數據可以是*.xml, *.json 文件，也可以是代碼中xml或json格式的數據。
載體：頁面中裝載swf的空間組件。Eg：div，span等等。
二、裝載swf的注意事項
1. 裝載swf的基本語法
頁面必須引用FusionCharts.js
<scripttype="text/javascript" src="../ FusionCharts.js"></script>
<div id="chartdiv">FusionCharts will be loaded here!</div>
<script type="text/javascript">
var chart = new FusionCharts("../FusionCharts/Column3D.swf", "chartid", "400", "300", "0", "1");
chart.setDataURL("../FusionData/LinkjavascriptData.xml");
chart.render("chartdiv");
</script>
Column3D.swf：所要展現的圖表類型
LinkjavascriptData.xml：圖表引用的數據源
FusionCharts(“swf”,”id”,”width”,”height”,”debugmodel”,”registerwithjs”)：debugmodel 通常設置為0，registerwithjs通常設置為1.
2. 基本數據格式
XML文件<chart>開頭，以</chart>結束；或者以<graph>開頭，以</graph>結束。
XML標簽屬性有以下四種數據類型：布爾型、數字型、字符型、十六進制顏色代碼（只支持十六進制的顏色表示，且去掉前面的#號）
Eg：
<?xml version="1.0" encoding="UTF-8"?>
<chart caption='Weekly Sales Summary' xAxisName='Week' yAxisName='Sales'
placeValuesInside='1' useRoundEdges='1' showBorder='1' exportEnabled="1" exportHandler="fcExporter1" exportAtClient="1" exportFormats="JPEG=jpg|PDF=pdf">
<set label='Week 1' value='14400' displayValue='good' />
<set label='Week 2' value='19600' />
<set label='Week 3' value='24000' />
<set label='Week 4' value='15700' />
<sytles>
<definition>
<sytle name='myBevel' type='Bevel' />
</definition>
<application>
<apply toObject='Background' styles='myBevel'/>
</application>
</sytles>
</chart>
該data.xml運行的結果如下：
三、 Charts文件中的swf文件及運行結果圖（略）
四、結合javascript的應用
1. 前提：
置FusionCharts中的registerwithjs為1.（實際中似乎0也可以，但最好用1）
2. 事件：
1) FC_Loaded(DOMId)：描述當SWF文件在客戶端已經完成下載
2) FC_Rendered(DOMId)：描述swf裝載完成。
3) FC_DataRendered(DOMId)：描述當圖表數據已經下載到dataxml或者dataURL
4) FC_DataLoadError(DOMId)：描述當從特定的URL下載數據發生錯誤
5) FC_NoDataToDisplay(DOMId)：描述當下載的xml文件里沒有可顯示的數據
6) FC_DataXMLInvalid(DOMId)：描述xml格式錯誤
3. 方法
1) setDataXML(strDataXML:string):改變圖表的數據
2) setDataXML(strDataXML:string):改變圖表的數據
3) setDataURL(strDataURL:string)：同上
4) print()：打印圖表
5) getXML()：返回圖表的xml數據
6) getChartAttribute(attrNamr:string)：返回xml <chart>標記的屬性
7) hasRendered()：布爾型，標志圖表是否已經呈現成功
8) getDataAsCSV()：返回圖表的數據位CSV字符型
五、熱點鏈接：link=’’
四種鏈接方式：
1. 鏈接到同一個窗口：link='指定頁面%3F參數' (link=’index.html?param’)
2. 鏈接到新的窗口：link='n-指定頁面%3F參數' (link=’n-index.html?param’)
3. 鏈接到一個指定的frame：link='F-FrameName-指定頁面%3F參數'（注參數一般不能超過兩個，當超過兩個則必須追加為一個字符串用逗號分隔）
4. 鏈接到一個彈出框：link="P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no, resizable=no-ShowDetails.asp%3FMonth%3DJan"
5. 整個圖表鏈接：clickURL='指定路徑'
6. 鏈接到Js ：link="j-function()"
7. Click 事件處理：link='S-parameter'（此方法是整個圖表的鏈接情況）
六、圖表數據導出
1. 使用context menu：設置屬性showExportDataMenuItem='1'，并可以通過exportDataMenuItemLabel=” ”設置導出標簽的名稱。這樣就可以把圖表中的數據復制到剪貼板上了，然后打開記事本之類的東東就可以把數據粘貼到上面去了。
Eg:
Data.xml
<chart caption='Weekly Sales Summary' xAxisName='Week' yAxisName='Sales'
placeValuesInside='1' useRoundEdges='1' showBorder='1' showExportDataMenuItem='1'
>
<set label='Week 1' value='14400' displayValue='good' />
<set label='Week 2' value='19600' />
<set label='Week 3' value='24000' />
<set label='Week 4' value='15700' />
</chart>
顯示：在圖標上右擊，有Copy data to clipboard.
2. 使用JavaScript Menu：首先置registerWithJS為1，即var chart1 = new FusionCharts("../../FusionCharts/Column3D.swf", "chart1Id", "400", "300", "0", "1")。然后根據charts節點id獲得一個對象，使用var chartObj = getChartFromId("chart1Id")方法。最后從這個對象取出圖表里的數據，使用chartObj.getDataAsCSV( ),然后就可以進行你需要的處理了
七、表導出為pdf或者圖片（JPEG和PNG）形式
1) 把jar包放到lib下面
2) 把classes文件發布到web-info下面
3) 在data.xml文件里加入exportEnabled='1'(允許導出)、exportHandler='JSP/FCExporter.jsp'(即處理導出的路徑，注意：默認是在跟data.xml在同一個跟目錄下面)、還可以設置exportAction（選擇導出的圖片會到客戶端作為下載還是直接保存到服務器）、exportAtClient（選擇是選擇客戶端導出還是選擇服務器端導出）等屬性
4) 把FCExporter.jsp、FCExporterError.jsp放在web工程下面（注意：FCExporter.jsp里WEB_ROOT_PATH的路徑，默認情況是Resources文件直接放在web工程下的，若將Resources文件放在其他文件包下面時注意修改WEB_ROOT_PATH路徑
5) 處理流程：data.xml中指明exportHandler路徑。觸發導出時轉向exportHandler所指向的路徑FCExporter.jsp，在FCExporter.jsp中調用FusionChartsExportHelper.class中的HttpServletRequest類將data.xml中的數據以流的形式傳進來，將charts的寬度、高度、顏色、domid作為元數據傳入。并且根據選擇是導出pdf還是圖片導向resource下面的不同頁面路徑。（導出時會遇到數據傳入的數據為空的情況，推薦使用客戶端圖表導出的方法）
2、客戶端圖表導出
1) 包含FusionChartsExportComponent.js文件
2) 包含FCExporter.swf文件
3) 設置xml文件里的一下屬性：exportEnabled='1'（允許導出） exportAtClient='1' （客戶端導出方式）exportHandler='fcExporter1'（處理導出）
4) Html文件里加入
<div id="fcexpDiv" align="center">FusionCharts Export Handler Component</div>
<script type="text/javascript">
Var myExportComponent = new FusionChartsExportObject("fcExporter1", "../../FusionCharts/FCExporter.swf");
myExportComponent.Render("fcexpDiv");
</script>
3、批圖表導出處理：
1) 前提：要批導出的數據共用一個xml文件，即共用數據。
2) 與單個導出的不同之處：
Ø myExportComponent.sourceCharts = ['myChartId1','myChartId2','myChartId3'];
Ø 用sourceCharts方法包含需導出的所以圖表DOMid
Ø 設置導出圖片相關的屬性：componentAttributes。
附件：http://down.51cto.com/data/2359294
