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

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

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

2、要的成圖效果的演示點(diǎn)線圖柱狀圖面積圖Stacked面積圖復(fù)合模式餅圖環(huán)圖2 控件部署需要的文件有1).charts文件。在web工程的根目錄下建立Chart文件夾（注意大小寫），將所有用到的swf文件放到該目錄下。2).js文件將FusionCharts.js與dateFmt.js引入系統(tǒng)存放javascript的目錄內(nèi)。此外，該模塊需要jquery庫(kù)的支持，將jquery相關(guān)的js文件放入javascript目錄內(nèi)。3).后臺(tái)數(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對(duì)象要求必須有一個(gè)數(shù)組用于封裝所有的數(shù)據(jù)，數(shù)組中的每一個(gè)值為json對(duì)象，封裝了每條記錄的所有數(shù)據(jù)。注意：為了便于日期型數(shù)據(jù)的展示，所有的日期型數(shù)據(jù)都必須通過getTime方法轉(zhuǎn)化為毫秒數(shù)。后臺(tái)數(shù)據(jù)只要能夠生成上述模式的數(shù)據(jù)即可，與平臺(tái)無(wú)關(guān)。demo中提供了java語(yǔ)言的默認(rèn)實(shí)現(xiàn)，如果要使用請(qǐng)將json.jar文件引入引入系統(tǒng)類路徑。該jar包基于org.json包進(jìn)行修改得來，其中JSONObject對(duì)象可以直接將List（每項(xiàng)為Map）數(shù)據(jù)轉(zhuǎn)化為滿足畫圖需要的json數(shù)據(jù)。3 開始繪圖1).點(diǎn)線圖，柱狀圖，面積圖，st

5、acked（目前只支持面積圖的堆疊，柱狀圖的堆疊稍后加入）步驟一：引入文件在頁(yè)面文件中依次引入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ù)格式參見“后臺(tái)數(shù)據(jù)生成”部分的描述。JSON.parse方

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

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

9、以單獨(dú)指定"column":"RQ",/”ds”:ds,/ds可單獨(dú)指定"fmt":"MM月dd日"/如果指定該值，程序?qū)驯玖凶鳛槿掌陬愋吞幚?其他的一些屬性，如果默認(rèn)值不能滿足要求可以單獨(dú)設(shè)置，具體見附錄,"axes":/坐標(biāo)軸定義，為數(shù)組，數(shù)組大小為1或2，分別用于設(shè)置圖形兩側(cè)的坐標(biāo)軸。/第一個(gè)對(duì)象用于設(shè)置靠左邊的軸"axisName":"產(chǎn)液",/坐標(biāo)軸的標(biāo)題"serieses":/serieses對(duì)象用于指定該軸上要畫的線，為

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

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

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

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

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

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

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

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

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

19、n數(shù)組單獨(dú)設(shè)置該線的數(shù)據(jù)源否renderAslineline/bar/area單獨(dú)設(shè)置該線的繪圖模式， 線，柱，面積圖等否還有很多其他的屬性，與fusioncharts官方版本一致，該封裝保留了對(duì)原版本的兼容。具體參數(shù)的描述請(qǐng)參照官方幫助文檔。另外還可以設(shè)置圖形的默認(rèn)樣式和動(dòng)畫效果等，舉例展示如下： 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" ;想獲得更詳細(xì)的信息請(qǐng)參照fusioncharts官方幫助文檔。維護(hù)列表日期工作描述2010/10/11添加基本的圖形動(dòng)態(tài)修改功能：每條曲線可以單獨(dú)控制顯示與隱藏。該功能需

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論