Fusioncharts畫圖控件封裝_使用手冊_第1頁
Fusioncharts畫圖控件封裝_使用手冊_第2頁
Fusioncharts畫圖控件封裝_使用手冊_第3頁
Fusioncharts畫圖控件封裝_使用手冊_第4頁
Fusioncharts畫圖控件封裝_使用手冊_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、Fusioncharts畫圖控件封裝使用手冊1 功能描述本控件的主要用途是編寫一套強大、美觀、易用的曲線生成工具，用以簡化現(xiàn)有項目中相關的曲線開發(fā)工作。該控件基于時下流行的flash畫圖工具Fusioncharts3.1開發(fā)。支持折線圖，柱狀圖，餅圖，面積圖等常用圖形的繪制（暫不支持直方圖和平滑曲線）。圖形為客戶端動態(tài)繪制，可以實現(xiàn)動態(tài)縮放，動畫效果等，生成的圖形美觀大方。該控件完全基于javascript開發(fā)，實現(xiàn)了平臺無關性，同時由于生成的圖形為客戶端動態(tài)繪制，熱點數(shù)據(jù)等不需要單獨進行傳輸管理，因此成圖效率很高，解決了jfreechar等工具由于熱點數(shù)據(jù)導致頁面執(zhí)行效率低下的問題。以下為主

2、要的成圖效果的演示點線圖柱狀圖面積圖Stacked面積圖復合模式餅圖環(huán)圖2 控件部署需要的文件有1).charts文件。在web工程的根目錄下建立Chart文件夾（注意大小寫），將所有用到的swf文件放到該目錄下。2).js文件將FusionCharts.js與dateFmt.js引入系統(tǒng)存放javascript的目錄內。此外，該模塊需要jquery庫的支持，將jquery相關的js文件放入javascript目錄內。3).后臺數(shù)據(jù)生成該控件目前只能解析json格式的數(shù)據(jù)。要求的數(shù)據(jù)格式如下："data":"RQ":1272643200000,"

3、;VALUE":1000,"VALUE2":0,"RQ":1272729600000,"VALUE":999,"VALUE2":2,"RQ":1272816000000,"VALUE":1036,"VALUE2":5,"RQ":1272902400000,"VALUE":1029,"VALUE2":7,"RQ":1273248000000,"VALUE&qu

4、ot;:1057,"VALUE2":28.該json對象要求必須有一個數(shù)組用于封裝所有的數(shù)據(jù)，數(shù)組中的每一個值為json對象，封裝了每條記錄的所有數(shù)據(jù)。注意：為了便于日期型數(shù)據(jù)的展示，所有的日期型數(shù)據(jù)都必須通過getTime方法轉化為毫秒數(shù)。后臺數(shù)據(jù)只要能夠生成上述模式的數(shù)據(jù)即可，與平臺無關。demo中提供了java語言的默認實現(xiàn)，如果要使用請將json.jar文件引入引入系統(tǒng)類路徑。該jar包基于org.json包進行修改得來，其中JSONObject對象可以直接將List（每項為Map）數(shù)據(jù)轉化為滿足畫圖需要的json數(shù)據(jù)。3 開始繪圖1).點線圖，柱狀圖，面積圖，st

5、acked（目前只支持面積圖的堆疊，柱狀圖的堆疊稍后加入）步驟一：引入文件在頁面文件中依次引入jquery.js,dateFmt.js,FusionCharts.js,注意引入順序<head><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/dateFmt.js"></script><script type

6、="text/javascript" src="js/FusionCharts.js"></script></head>步驟二：獲取數(shù)據(jù)獲得json數(shù)據(jù)，以jquery異步獲取為例$(document).ready(function()$.post("data.jsp",null,function(data)var json = JSON.parse(data);var ds=json.data;通過ajax訪問data.jsp獲得數(shù)據(jù)，生成的數(shù)據(jù)格式參見“后臺數(shù)據(jù)生成”部分的描述。JSON.parse方

7、法可將字符串類型的數(shù)據(jù)轉化為json數(shù)據(jù)。還可以通過其他模式獲得數(shù)據(jù)，參見demo中的index.jsp步驟三：生成圖表對象調用FusionCharts.createXYChart()方法生成圖形對象。該方法只有一個參數(shù)，為json格式數(shù)據(jù)，下面參照例子對該參數(shù)進行詳細描述。"chart":/char對象，封裝全圖級別的信息"width":"90%",/寬度，可按照像素或百分比設置"height":"300",/高度，可按照像素或百分比設置"caption":"產量

8、趨勢",/標題，將顯示在圖形上方"xAxisName":"日期",/橫軸描述，將在坐標軸下方（默認隱藏）和鼠標提示中用到“renderAs”:”line”/指定繪圖模式，支持bar，line，area等，默認為line/其他的一些屬性，如果默認值不能滿足要求可以單獨設置，具體見附錄,"ds":ds,/數(shù)據(jù)，為上一步生成的json格式的數(shù)據(jù)。該數(shù)據(jù)作為category和各個serieses的默認數(shù)據(jù)源，如果數(shù)據(jù)源單獨指定了，該值將被覆蓋。"category":/橫坐標設置，用于指定從ds中選取哪一列。ds可

9、以單獨指定"column":"RQ",/”ds”:ds,/ds可單獨指定"fmt":"MM月dd日"/如果指定該值，程序將把本列作為日期類型處理/其他的一些屬性，如果默認值不能滿足要求可以單獨設置，具體見附錄,"axes":/坐標軸定義，為數(shù)組，數(shù)組大小為1或2，分別用于設置圖形兩側的坐標軸。/第一個對象用于設置靠左邊的軸"axisName":"產液",/坐標軸的標題"serieses":/serieses對象用于指定該軸上要畫的線，為

10、一個數(shù)組，每一項用于描述一條曲線。/第一條線column用于指定從ds中選取哪一列作為數(shù)據(jù)，ds可單獨指定"seriesName":"老井液量",/”ds”:ds,/ds單獨指定"column":"VALUE",“color”:”FF0000”,/指定顏色“renderAs”:”bar”/指定繪圖模式，支持bar，line，area等/其他的一些屬性，如果默認值不能滿足要求可以單獨設置，具體見附錄,/第二條線"seriesName":"新井液量","column&q

11、uot;:"VALUE2"/其他的一些屬性，如果默認值不能滿足要求可以單獨設置，具體見附錄,/第二個對象用于設置靠右邊的軸"axisName":"井數(shù)","serieses":"seriesName":"總井數(shù)","column":"VALUE3"/其他的一些屬性，如果默認值不能滿足要求可以單獨設置，具體見附錄步驟四：渲染圖形調用chart.render函數(shù)將圖形繪制到頁面中。這里的chart為第三步中生成的chart對象。Render

12、函數(shù)有兩個參數(shù)，第一個參數(shù)用來指定圖形繪制的位置。支持字符串和dom對象兩種類型的參數(shù)。如果是字符串，將按照該字符串作為ID查找dom對象，否則直接用該dom對象，在該dom對象內繪制圖形。第二個參數(shù)為一布爾型參數(shù)，當該參數(shù)為true時，在圖形的上方會生成控制曲線顯示的復選框。具體代碼參見demo中的index.jsp2).餅圖餅圖的繪制比點線圖簡單，具體步驟為。步驟一：引入文件，這一步與點線圖繪制時相同，參照上面的介紹。步驟二：獲取數(shù)據(jù)，參照點線圖的介紹。步驟三：生成圖表對象調用FusionCharts.createPieChart()方法生成圖形對象。該方法只有一個參數(shù)，為json格式數(shù)據(jù)

13、，下面參照例子對該參數(shù)進行詳細描述：與點線圖相比，該參數(shù)要簡單許多/餅圖"ds":ds,/步驟二中獲得的數(shù)據(jù)"col":"VALUE",/作為數(shù)據(jù)的列"labelCol":"KEY"/作為分類的列/其他的一些屬性，如果默認值不能滿足要求可以單獨設置，具體見附錄步驟四：渲染圖形，參照點線圖的介紹。具體代碼參見demo中的index.jsp4 注意事項1. 對象屬性不區(qū)分大小寫，但為了便于閱讀和避免可能存在的兼容性問題，最好按照附錄中的大小寫拼寫規(guī)則進行使用。2. 目前不支持時序圖，要想繪制時序圖，

14、要求每條數(shù)據(jù)必須嚴格按照日期先后排序。3. category和每個series都支持單獨設置ds。但是要求每個ds數(shù)組的大小必須一致，并且每一行數(shù)據(jù)都按照業(yè)務邏輯對應。5 已知問題列表1. 不支持直方圖和平滑曲線圖的繪制。這是受限于fusioncharts本身的功能，暫不能解決。2. 不支持原jfreechart的組合圖形模式。即多個子圖共享同一橫軸的模式。只能通過繪制多個圖形的方式來代替。3. 不支持用戶自定義事件。這也是受到fusioncharts的限制。4. 暫時沒有封裝圖形動態(tài)修改功能。比如客戶端設置曲線的顏色，顯示與隱藏等。5. 暫時沒有提供修改默認樣式的接口。6. 缺少圖片另存為功

15、能。已解決。6 下階段開發(fā)方向1. 改進API，進一步簡化常用圖形的繪制。2. 添加圖形動態(tài)修改功能。即可以在客戶端對已經繪制完成的圖形進行動態(tài)配置。3. 開發(fā)java版本的圖片另存為功能。4. 由于fusioncharts本身的一些限制，很多功能無法實現(xiàn)。接下來將研究另一個開源項目OpenFlashChart看能否解決這些問題。封裝API盡量保持與現(xiàn)有模塊的兼容。5. 添加對dwr的支持，增強其對jquery的支持，考慮做成jquery插件的形式。附錄參數(shù)列表XYChart：包括點線圖，柱狀圖，面積圖等參數(shù)所屬對象參數(shù)名默認值可選值參數(shù)描述是否必須chartwidth無像素數(shù)或百分比圖形寬度

16、是height無像素數(shù)或百分比圖形高度是setAdaptiveYMin10/1Y軸最小值自適應否setAdaptiveSYMin10/1Y軸副軸最小值自適應否labelNum5整數(shù)橫軸label數(shù)目，該值會被labelStep覆蓋否labelStep由labelNum和記錄條數(shù)計算所得整數(shù)橫軸label的間隔否legendPositionRIGHTRIGHTBOTTOM圖例的顯示位置否renderAslineline/bar/area繪圖模式， 線，柱，面積圖。該值的設置影響到圖的條線的繪制否stacked00/1是否堆疊否showXlabel00/1是否顯示橫軸label否showYlabe

17、l10/1是否顯示縱軸label否showValues10/1是否在圖形上顯示值否bgColorFFFFFF,000000去掉#的顏色值背景色，可以設置色彩過渡，通過逗號間隔否divLineColor8CB1FF去掉#的顏色值水平線顏色否anchorAlpha00-100錨點的透明度，設置為0為不顯示錨點，但保留熱區(qū)還有很多其他的屬性，與fusioncharts官方版本一致，該封裝保留了對原版本的兼容。具體參數(shù)的描述請參照官方幫助文檔。dsds無Json格式的數(shù)據(jù)數(shù)據(jù)源，如果category和serieses不單獨設置ds的話，都會使用該ds否categorycolumn無字符串ds中用于作為

18、橫軸的列名是ds無Json格式的數(shù)據(jù)json格式的數(shù)據(jù)源該值會覆蓋圖表的ds否fmt無日期格式字符串如”MM月dd日”參照java的日期格式字符串寫法否還有很多其他的屬性，與fusioncharts官方版本一致，該封裝保留了對原版本的兼容。具體參數(shù)的描述請參照官方幫助文檔。axesaxes無json數(shù)組用于設置坐標軸，為一json數(shù)組，大小為1或2，分別用于設置主軸和副軸是axisName無字符串縱軸的描述，同時用作縱軸的label值否serieses無Json數(shù)組每一項用于描述一條線是seriesesseriesName無字符串該線的描述是column無字符串從ds中取值的列名是ds無Jso

19、n數(shù)組單獨設置該線的數(shù)據(jù)源否renderAslineline/bar/area單獨設置該線的繪圖模式， 線，柱，面積圖等否還有很多其他的屬性，與fusioncharts官方版本一致，該封裝保留了對原版本的兼容。具體參數(shù)的描述請參照官方幫助文檔。另外還可以設置圖形的默認樣式和動畫效果等，舉例展示如下： json.styles= "definition": "style": "name":"myToolTipFont", "type":"font", "size&quo

20、t;:"40", "font":"宋體", "color":"FF0000" , "name": "myAnim", "type": "animation", "param": "_y", "start": "0", "easing": "Bounce", "duration":

21、 "1" , "application": "apply": "toobject":"ToolTip", "styles":"myToolTipFont" , "toobject": "ANCHORS", "styles": "myAnim" ;想獲得更詳細的信息請參照fusioncharts官方幫助文檔。維護列表日期工作描述2010/10/11添加基本的圖形動態(tài)修改功能：每條曲線可以單獨控制顯示與隱藏。該功能需

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論