fusioncharts實現數據動畫圖表

一、 FusionCharts構成的基本三要素:swfdata,承載圖表的載體。
   SwfCharts文件夾下面的所有swf文件,需要什麼樣的圖表樣式,就加在與之相對應的swf文件。
   Data:數據源。數據可以是*.xml, *.json 文件,也可以是代碼中xmljson格式的數據。
   載體:頁面中裝載swf的空間組件。Egdivspan等等。
 
 二、裝載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 通常設置爲0registerwithjs通常設置爲1.
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的應用
FusionCharts中的registerwithjs1.(實際中似乎0也可以,但最好用1
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格式錯誤
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字符型
四種鏈接方式:
1.         鏈接到同一個窗口:link='指定頁面%3F參數' (link=’index.html?param’)
2.         鏈接到新的窗口:link='n-指定頁面%3F參數' (link=’n-index.html?param’)
3.         鏈接到一個指定的framelink='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:首先置registerWithJS1,即var chart1 = new FusionCharts("../../FusionCharts/Column3D.swf", "chart1Id", "400", "300", "0", "1")。然後根據charts節點id獲得一個對象,使用var chartObj = getChartFromId("chart1Id")方法。最後從這個對象取出圖表裏的數據,使用chartObj.getDataAsCSV( ),然後就可以進行你需要的處理了
 七、表導出爲pdf或者圖片(JPEGPNG)形式
1、服務器端圖表導出
1)         jar包放到lib下面
2)         classes文件發佈到web-info下面
3)         data.xml文件里加入exportEnabled='1'(允許導出)exportHandler='JSP/FCExporter.jsp'(即處理導出的路徑,注意:默認是在跟data.xml在同一個跟目錄下面)、還可以設置exportAction(選擇導出的圖片會到客戶端作爲下載還是直接保存到服務器)、exportAtClient(選擇是選擇客戶端導出還是選擇服務器端導出)等屬性
4)         FCExporter.jspFCExporterError.jsp放在web工程下面(注意:FCExporter.jspWEB_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://dl.vmall.com/c0s6x9habn(文件下載) 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章