建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
FusionChart使用1
一、 FusionCharts構(gòu)成的基本三要素：swf，data，承載圖表的載體。
Swf：Charts文件夾下面的所有swf文件，需要什么樣的圖表樣式，就加在與之相對(duì)應(yīng)的swf文件。
Data：數(shù)據(jù)源。數(shù)據(jù)可以是*.xml, *.json 文件，也可以是代碼中xml或json格式的數(shù)據(jù)。
載體：頁(yè)面中裝載swf的空間組件。Eg：div，span等等。
二、裝載swf的注意事項(xiàng)
1. 裝載swf的基本語(yǔ)法
頁(yè)面必須引用FusionCharts.js
"chartdiv">FusionCharts will be loaded here!
Column3D.swf：所要展現(xiàn)的圖表類(lèi)型
LinkjavascriptData.xml：圖表引用的數(shù)據(jù)源
FusionCharts(“swf”,”id”,”width”,”height”,”debugmodel”,”registerwithjs”)：debugmodel通常設(shè)置為0，registerwithjs通常設(shè)置為1.
2. 基本數(shù)據(jù)格式
XML文件
XML標(biāo)簽屬性有以下四種數(shù)據(jù)類(lèi)型：布爾型、數(shù)字型、字符型、十六進(jìn)制顏色代碼（只支持十六進(jìn)制的顏色表示，且去掉前面的#號(hào)）
Eg：
"1.0" encoding="UTF-8"?>
placeValuesInside='1' useRoundEdges='1' showBorder='1' exportEnabled="1" exportHandler="fcExporter1" exportAtClient="1" exportFormats="JPEG=jpg|PDF=pdf">
該data.xml運(yùn)行的結(jié)果如下：
三、 Charts文件中的swf文件及運(yùn)行結(jié)果圖（略）
四、結(jié)合javascript的應(yīng)用
1. 前提：
置FusionCharts中的registerwithjs為1.（實(shí)際中似乎0也可以，但最好用1）
2. 事件：
1) FC_Loaded(DOMId)：描述當(dāng)SWF文件在客戶(hù)端已經(jīng)完成下載
2) FC_Rendered(DOMId)：描述swf裝載完成。
3) FC_DataRendered(DOMId)：描述當(dāng)圖表數(shù)據(jù)已經(jīng)下載到dataxml或者dataURL
4) FC_DataLoadError(DOMId)：描述當(dāng)從特定的URL下載數(shù)據(jù)發(fā)生錯(cuò)誤
5) FC_NoDataToDisplay(DOMId)：描述當(dāng)下載的xml文件里沒(méi)有可顯示的數(shù)據(jù)
6) FC_DataXMLInvalid(DOMId)：描述xml格式錯(cuò)誤
3. 方法
1) setDataXML(strDataXML:string):改變圖表的數(shù)據(jù)
2) setDataXML(strDataXML:string):改變圖表的數(shù)據(jù)
3) setDataURL(strDataURL:string)：同上
4) print()：打印圖表
5) getXML()：返回圖表的xml數(shù)據(jù)
6) getChartAttribute(attrNamr:string)：返回xml
7) hasRendered()：布爾型，標(biāo)志圖表是否已經(jīng)呈現(xiàn)成功
8) getDataAsCSV()：返回圖表的數(shù)據(jù)位CSV字符型
五、熱點(diǎn)鏈接：link=’’
四種鏈接方式：
1. 鏈接到同一個(gè)窗口：link='指定頁(yè)面%3F參數(shù)' (link=’index.html?param’)
2. 鏈接到新的窗口：link='n-指定頁(yè)面%3F參數(shù)' (link=’n-index.html?param’)
3. 鏈接到一個(gè)指定的frame：link='F-FrameName-指定頁(yè)面%3F參數(shù)'（注參數(shù)一般不能超過(guò)兩個(gè)，當(dāng)超過(guò)兩個(gè)則必須追加為一個(gè)字符串用逗號(hào)分隔）
4. 鏈接到一個(gè)彈出框：link="P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no, resizable=no-ShowDetails.asp%3FMonth%3DJan"
5. 整個(gè)圖表鏈接：clickURL='指定路徑'
6. 鏈接到Js ：link="j-function()"
7. Click 事件處理：link='S-parameter'（此方法是整個(gè)圖表的鏈接情況）
六、圖表數(shù)據(jù)導(dǎo)出
1. 使用context menu：設(shè)置屬性showExportDataMenuItem='1'，并可以通過(guò)exportDataMenuItemLabel=” ”設(shè)置導(dǎo)出標(biāo)簽的名稱(chēng)。這樣就可以把圖表中的數(shù)據(jù)復(fù)制到剪貼板上了，然后打開(kāi)記事本之類(lèi)的東東就可以把數(shù)據(jù)粘貼到上面去了。
Eg:
Data.xml
placeValuesInside='1' useRoundEdges='1' showBorder='1' showExportDataMenuItem='1'
>
顯示：在圖標(biāo)上右擊，有Copy data to clipboard.
2. 使用JavaScript Menu：首先置registerWithJS為1，即var chart1 = new FusionCharts("../../FusionCharts/Column3D.swf", "chart1Id", "400", "300", "0", "1")。然后根據(jù)charts節(jié)點(diǎn)id獲得一個(gè)對(duì)象，使用var chartObj = getChartFromId("chart1Id")方法。最后從這個(gè)對(duì)象取出圖表里的數(shù)據(jù)，使用chartObj.getDataAsCSV( ),然后就可以進(jìn)行你需要的處理了
七、表導(dǎo)出為pdf或者圖片（JPEG和PNG）形式
1、服務(wù)器端圖表導(dǎo)出
1) 把jar包放到lib下面
2) 把classes文件發(fā)布到web-info下面
3) 在data.xml文件里加入exportEnabled='1'(允許導(dǎo)出)、exportHandler='JSP/FCExporter.jsp'(即處理導(dǎo)出的路徑，注意：默認(rèn)是在跟data.xml在同一個(gè)跟目錄下面)、還可以設(shè)置exportAction（選擇導(dǎo)出的圖片會(huì)到客戶(hù)端作為下載還是直接保存到服務(wù)器）、exportAtClient（選擇是選擇客戶(hù)端導(dǎo)出還是選擇服務(wù)器端導(dǎo)出）等屬性
4) 把FCExporter.jsp、FCExporterError.jsp放在web工程下面（注意：FCExporter.jsp里WEB_ROOT_PATH的路徑，默認(rèn)情況是Resources文件直接放在web工程下的，若將Resources文件放在其他文件包下面時(shí)注意修改WEB_ROOT_PATH路徑
5) 處理流程：data.xml中指明exportHandler路徑。觸發(fā)導(dǎo)出時(shí)轉(zhuǎn)向exportHandler所指向的路徑FCExporter.jsp，在FCExporter.jsp中調(diào)用FusionChartsExportHelper.class中的HttpServletRequest類(lèi)將data.xml中的數(shù)據(jù)以流的形式傳進(jìn)來(lái)，將charts的寬度、高度、顏色、domid作為元數(shù)據(jù)傳入。并且根據(jù)選擇是導(dǎo)出pdf還是圖片導(dǎo)向resource下面的不同頁(yè)面路徑。（導(dǎo)出時(shí)會(huì)遇到數(shù)據(jù)傳入的數(shù)據(jù)為空的情況，推薦使用客戶(hù)端圖表導(dǎo)出的方法）
2、客戶(hù)端圖表導(dǎo)出
1) 包含FusionChartsExportComponent.js文件
2) 包含FCExporter.swf文件
3) 設(shè)置xml文件里的一下屬性：exportEnabled='1'（允許導(dǎo)出） exportAtClient='1' （客戶(hù)端導(dǎo)出方式）exportHandler='fcExporter1'（處理導(dǎo)出）
4) Html文件里加入
FusionCharts Export Handler Component
3、批圖表導(dǎo)出處理：
1) 前提：要批導(dǎo)出的數(shù)據(jù)共用一個(gè)xml文件，即共用數(shù)據(jù)。
2) 與單個(gè)導(dǎo)出的不同之處：
Ø myExportComponent.sourceCharts = ['myChartId1','myChartId2','myChartId3'];
Ø 用sourceCharts方法包含需導(dǎo)出的所以圖表DOMid
Ø 設(shè)置導(dǎo)出圖片相關(guān)的屬性：componentAttributes。
創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)提供安化企業(yè)網(wǎng)站建設(shè),專(zhuān)注與網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、H5頁(yè)面制作、小程序制作等業(yè)務(wù)。10年已為安化眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。
附件：http://down.51cto.com/data/2359294
標(biāo)題名稱(chēng)：FusionChart使用1
網(wǎng)頁(yè)鏈接：http://www.ef60e0e.cn/article/jiegoe.html
