何冬輝++葉振起++趙奕州
摘要:傳統的Web圖表開發在不同終端、不同平臺上實現時,為滿足用戶全方位、多角度的體驗而采用不同的圖形組件,這無疑增加了開發量與維護量。JFreeChart是Java平臺上一個開源圖表繪制類庫,動態圖表在不同終端和平臺生成時都基于相同的繪圖組件,其提供了基于C/S與B/S架構下生成各種圖片格式的圖表,具有種類豐富、功能完善的數據圖形表現力與渲染力。為使轉子動平衡計算結果顯示更加清晰、直觀,同時增強該Web APP頁面的功能與顯示效果,結合JFreeChart開源圖形包的特點、工作原理及開發流程,基于Vaadin開發框架,設計并實現了轉子動平衡計算數據的動態圖形顯示。實例應用表明,JFreeChart在數據圖表實現時,不僅顯著提高了開發效率,也兼顧了不同終端的用戶體驗。
關鍵詞:JFreeChart;圖表;Vaadin;用戶體驗
DOIDOI:10.11907/rjdk.171651
中圖分類號:TP319文獻標識碼:A文章編號:16727800(2017)010016204
0引言
傳統的轉子動平衡計算都是簡單以數據來表現,缺少直觀生動的表現力,而其計算結果的顯示、分析及指導動平衡塊安裝所面臨的首要任務就是將計算結果可視化。傳統的Web圖表繪制都是采用胖客戶端的形式[1],如Applet,這種形式通常需要在客戶機上安裝相應的運行插件(如Flash插件),服務端將數據傳遞客戶端,客戶端接收數據繪制相應圖表。由于圖表在客戶端生成,其對客戶端要求比較高,無法滿足不同終端、不同平臺的用戶體驗,而且速度比較慢,無法適應現代高速互聯網的發展。
隨著信息技術的發展,瘦客戶端圖表繪制形式逐漸成為主流,即服務端直接將運算數據生成的圖像傳遞給客戶端,客戶端無需處理數據,圖表在Web瀏覽器即可動態顯示[2]。目前基于該形式的Web圖表繪制組件較多,如JFreeChart、FusionCharts與Open Flash Chart等,其中JFreeChart以其強大的功能、出色的制圖效果及便捷的操作方法在Java領域已得到廣泛應用,特別是其與Vaadin開發框架的結合,應用于Web APP的開發,實現了業務層與表現層的代碼分離,大幅降低了開發人員的開發量與維護量。本文通過結合JFreeChart開源圖形包的特點、工作原理及開發流程,基于Vaadin開發框架,設計并實現了轉子動平衡計算數據的動態圖形顯示。
1JFreeChart概述與研究進展
1.1功能特性
JFreeChart是Java中開源的制圖組件,主要用于生成各種動態圖表。在Java的圖形報表技術中,JFreeChart組件提供了方便、快捷、靈活的制圖方法,能夠生成各種各樣的圖形報表,如提供餅圖(二維/三維)、柱狀圖(水平/垂直)、線圖、點圖、時間變化圖、甘特圖、股票行情圖、混和圖、溫度計圖、刻度圖等常用商用圖表,顯示在應用程序中。JFreeChart廣泛的功能包括:豐富的API,支持各種各樣的圖表類型;靈活的設計,易于擴展,適應服務器端與客戶端的應用;支持多種類型的輸出,包括Swing界面、圖像文件(包括PNG、JPEG格式)與矢量圖形文件格式。
JFreeChart主要特征如下:①定義接口的任何實現通俗易懂;②易于導出PNG與JPEG圖像文件格式(也可以使用Java的圖像I/O類庫生成類庫支持的任何格式),使用Graphics2D工具導出其它格式;③使用iText工具導出PDF格式文件,使用Batik工具導出SVG格式文件;④圖像工具欄,圖像豐富、美觀;⑤圖表支持鼠標事件,支持注解;⑥產生HTML圖像映射;⑦支持JDBC,可動態顯示來自多種數據庫的數據;⑧可以工作于Application/Servlets/Jsp/Applets等環境;⑨完全開源,嚴格遵守GNU的通用公共認證協議。
1.2工作原理及開發流程
基于JFreeChart的瘦客戶端圖形繪制組件工作原理如下:客戶端(Client)通過Web瀏覽器向服務器端(Server)發送應用請求,服務器端接受請求后,基于用戶業務邏輯需求,從客戶端提供的數據或數據接口中獲取相關數據,在服務器端經過數據整理后,構造圖表所需的數據集,并由JFreeChart引擎加載此數據集,在服務器端生成臨時圖片文件,將圖片的地址返回給客戶端瀏覽器,以圖片形式顯示在Web瀏覽器上[3],如圖1所示。
JFreeChart的開發流程如圖2所示。
1.3研究進展
基于JFreeChart強大的功能特性及成熟的技術支持,眾多軟件開發者將其應用于不同終端的應用程序開發,并取得了顯著的研究成果。文獻[4]研究了JFreeChart繪制圖形的方法及開發流程,并繪制出某石油公司用電數據統計曲線圖。文獻[5]基于J2EE技術的B/S架構模式,采用Struts與Hibernate的輕量級框架結構,應用JFreeChart將報表數據動態生成多樣化、直觀化的年度、月度、日度圖形報表。文獻[6]指出Applet圖形繪制的安全隱患,將JFreeChart應用于JSP圖形開發,實現了JFreeChart圖表的共享與在線更新。文獻[7]將JFreeChart的Java動態圖形報表技術應用于鐵路機車運行狀態中,實現了對機車設備的遠程監視。基于JFreeChart繪制Web統計圖表,不僅提高了開發效率,也降低了項目成本。由于對JFreeChart API的封裝,開發人員在作擴展時,無需再過多地關注于繁瑣的JFreeChart API,從而能將更多時間、精力投入到具體的業務邏輯上[8]。
目前,JFreeChart已廣泛應用于J2EE、Struts、Spring和Hibernate等開發框架,但基于前端的Vaadin開發框架開發Web APP應用程序時應用較少。本文將JFreeChart與Vaadin結合,設計并實現了轉子動平衡計算數據的動態圖形顯示,為動平衡塊的安裝提供了直觀形象的指導。endprint
2系統開發與應用
2.1開發框架
為實現轉子動平衡計算在智能手機、PAD等移動終端的應用需求,同時兼顧系統交互性與功能性,系統基于Vaadin開發框架設計與實現。Vaadin是一個用于創建富客戶端(RIA)應用程序的前端開發框架[9],應用程序在不同終端與平臺實現時都基于相同的框架,其具有種類豐富與功能完善的界面表現、靈活的數據監聽處理功能,同時能兼顧跨平臺、跨終端的觸屏交互、動畫切換等移動特性。
系統所有的計算功能都在Web服務器端實現,用戶通過Web瀏覽器與系統交互,Vaadin客戶端引擎將原始數據發送給Servlet容器中的終端適配器,終端適配器通過Web服務器接收來自客戶端的用戶請求,調用相應的計算模塊,將用戶請求轉換為特定會話中的用戶事件。每個用戶事件都與服務器端的相應UI組件關聯,終端適配器會根據UI組件的改變生成相應的響應,并發送到客戶端的Web瀏覽器中。客戶端瀏覽器中的客戶端引擎接收該響應,并將響應內容渲染在Web頁面的UI界面上[10]。
以動平衡試重計算為例,如圖3所示,當用戶輸入基本參數之后,系統UI組件檢測用戶輸入合法性,檢測到非法輸入將出現提示信息。用戶輸入正確數據后,點擊“計算”按鈕,綁定在“計算”按鈕組件上的監聽器會立即觸發Button.ClickEvent事件,并通過HTTP連接以事件的形式將原始輸入數據傳回服務器端組件。服務器端組件再將該事件轉送應用程序的邏輯處理代碼,通過監聽邏輯代碼中的事件處理邏輯(Button.ClickListener監聽事件),首先獲取用戶輸入的原始數據,轉換輸入字符串為數值,調用相應的計算模塊處理數據,再將計算結果綁定到UI組件上,服務器端UI組件狀態發生變化,終端適配器發送相應響應,客戶端的Web瀏覽器接收該響應并進行渲染,如繪制平衡塊安裝示意圖。
2.2關鍵技術
(1)基于Vaadin的轉子動平衡計算系統,其功能表現為用戶輸入數據、顯示計算結果與繪制平衡塊安裝示意圖。系統采用基于Vaadin的B/S技術架構模式,并利用Vaadin的MVC分層設計模式,前臺界面顯示層、邏輯業務層的代碼是完全分離的,只有當程序運行時,具體的View層才與相應的Mode層進行綁定,完成相應的業務邏輯功能,從而提高系統的靈活性與復用性。
(2)Vaadin作為一種創建富客戶端(RIA)應用程序的中間組件,具有很高的可擴展性,所以除了Vaadin本身提供的組件之外,還可以非常方便地使用第三方Widget。在Vaadin Directory中可以找到數百個插件(Add-on),JFreeChartWrapper便是一個將JFreeChart應用于Vaadin的插件,JFreeChart在Vaadin中的工作流程如圖4。
3系統實現
3.1在Vaadin中配置
JFreeChart在Vaadin中配置,主要是在Vaadin項目配置文件pox.xml中設置,如圖5所示,配置完成后Vaadin將直接從Vaadin Directory中下載相關插件。
3.2在Vaadin中實現
轉子動平衡塊的安裝圖示,需要在極坐標圖上表明轉子的旋轉方向、鍵槽的位置、坐標軸的角度以及平衡塊的質量和角度等參數。加重的角度是以鍵相槽為零位、逆轉子旋轉方向轉動的角度。因此,平衡塊的安裝示意圖主要是基于JFreeChart繪制極坐標圖,并作相應的圖形標識。
3.2.1關聯數據集Dataset
轉子動平衡計算結果都是以矢量表示,大小為平衡塊質量,方向為平衡塊安裝角度,極坐標數據集為矢量數據集,其創建過程如下:
public XYDataset createDataset(VectorBal[] vectorBal, String[] str) {
//vectorBal為動平衡計算結果的矢量數據集,str為數據集名稱標識數組;
XYSeriesCollection result = new XYSeriesCollection();
XYSeries ser[]=new XYSeries[str.length];
for(int i=0; i ser[i] = new XYSeries(str[i]); //創建不同曲線數據 ser[i].add(0, 0); //加入坐標原點 ser[i].add((90-vectorBal[i].getpha()+360)%360, 25); //加入矢量數據 result.addSeries(ser[i]); //加入數據集 } return result; } 3.2.2極坐標圖繪制 由于JFreeChart極坐標圖PolarPlot的角度是以豎軸上方為零位,而轉子動平衡塊安裝示意圖是以橫軸右側為零位逆時針方向定角度的。因此,需要對PolarPlot的坐標軸進行順時針旋轉90°,即:θ'=90-θ,并重寫PolarPlot的refreshAngleTicks()方法,更改坐標軸角度標簽顯示,其實現過程如下: private JFreeChart createChart(XYDataset dataset) { ………… PolarPlot plot = new PolarPlot(dataset, radiusAxis, renderer) { @Override protected List refreshAngleTicks() {
List
int delta = (int) this.getAngleTickUnit().getSize();
for (int t = 0; t < 360; t += delta) {
int tp = (360 + 90 - t) % 360; //旋轉坐標軸
NumberTick tick = new NumberTick(
Double.valueOf(t), String.valueOf(tp)+"°", //角度標簽顯示
TextAnchor.CENTER, TextAnchor.CENTER_RIGHT, 0.0);
ticks.add(tick);
}
…………
return ticks;
}
};
}
3.2.3圖形打包輸出
JFreeChartWrapper加載包是在Vaadin應用程序上顯示JFreeChart內置圖表的組件。JFreeChart利用JFreeChartWrapper在瀏覽器圖表中渲染為SVG,使圖表非常清晰。對于IE(不支持SVG)圖表則呈現為PNG柵格圖像,其實現過程如下:
public HanssonChart(String title, VectorBal[] vectorBal, String[] str) {
…………
setCaption(title); //設置標題
JFreeChart chart = createChart(createDataset(vectorBal,str)); //創建極坐標圖實例
chart.setBackgroundPaint(Color.WHITE); //設置背景顏色
JFreeChartWrapper wrapper = new JFreeChartWrapper(chart);
// 在Vaadin中利用JFreeChartWrapper打包JFreeChart圖輸出
…………
}
3.2.4實例應用
轉子動平衡計算系統根據所要實現的單面平衡、雙面平衡、多面平衡、輔助功能等功能模塊,利用Vaadin所提供的各種組件與布局方式設置系統界面。每個功能模塊設置子功能模塊導航,用戶可根據需要進行操作,單面平衡功能界面如圖6所示。
用戶進入雙面平衡模塊后,選擇影響系數法,步驟如下:①輸入原始振動“振幅”與“相位”;②輸入試加重“質量”與安裝“角度”;③輸入試加重后“振幅”與“相位”。
點擊“計算”按鈕,系統將計算出影響系數、校核質量(保留試重/去掉試重)及自動顯示平衡塊安裝示意圖,如圖7所示。
4結論
(1)對JFreeChart圖形開發組件的功能特性與開發流程進行了相關介紹,并基于Vaadin開發框架實現了JFreeChart在轉子動平衡計算系統圖形開發中的應用,以提高開發效率和減輕開發量。
(2)開源JFreeChart是目前較為流行的免費輕量級Web圖表制作工具,其豐富的圖形表現力與渲染力,能實現良好的交互性,突顯了JFreeChart在Web APP應用開發方面所擁有的優勢。
(3)JFreeChart是純Java語言開發的圖形組件,無需考慮瀏覽器兼容性問題,解決了傳統Web開發中面臨的客戶端瀏覽器兼容性問題,能滿足用戶差異化、復雜化的需求。
(4)JFreeChart應用于Vaadin開發框架,實現了業務層與表現層的代碼分離,可有效減少編程人員的工作量,縮短項目開發時間,在基于Vaadin開發框架的Web APP數據可視化開發中擁有廣闊的應用前景。
參考文獻:
\[1\]朱賀新,穆榮,盧建軍.JFreeChart的應用開發與改進[J].西安科技大學學報,2008,28(4):789792.
[2]李伯宇,趙麗麗.在JSP中實現動態圖表方法研究[J].計算機應用,2007,23(6):213214.
[3]番煜,惠燕.JFreeChart在網絡性能管理系統中的應用[J].計算機工程與設計,2008,29(16): 2325.
[4]任小海,胡宏濤.基于JFreeChart的Web統計圖形繪制方法研究[J].軟件導刊,2009,8(11):207208.
[5]侯俁,劉萬軍.JFreeChart在Java Web項目中的應用[J].科學技術與工程,2008,8(10):26992701.
[6]張金水.基于Java的JFreeChart在Internet共享系統中的應用[J].武漢大學學報,2005,51(S2):105107.
[7]李飛,李銳,王超.JFreeChart在鐵路機車運行監視系統中的應用[J].計算機系統應用,2012,21(6):140143.
[8]陽瑞發,陶以政.基于JFreeChart繪制Web統計圖表的設計與實現[J].網絡安全技術與應用,2010(12):6466.
[9]聶金慧,蘇紅旗,劉官樹.基于RIA的Vaadin系統架構與設計模式研究[J].信息網絡安全,2013(8):3840.
[10]孟慶強,陶時偉,廖婉玲.基于Vaadin的有序用電管理系統的研究與實現[J].計算機應用與軟件,2016(1):8593.
責任編輯(責任編輯:何麗)