何冬輝++葉振起++趙奕州

摘要：傳統(tǒng)的Web圖表開發(fā)在不同終端、不同平臺上實現(xiàn)時，為滿足用戶全方位、多角度的體驗而采用不同的圖形組件，這無疑增加了開發(fā)量與維護量。JFreeChart是Java平臺上一個開源圖表繪制類庫，動態(tài)圖表在不同終端和平臺生成時都基于相同的繪圖組件，其提供了基于C/S與B/S架構下生成各種圖片格式的圖表，具有種類豐富、功能完善的數(shù)據(jù)圖形表現(xiàn)力與渲染力。為使轉(zhuǎn)子動平衡計算結果顯示更加清晰、直觀，同時增強該Web APP頁面的功能與顯示效果，結合JFreeChart開源圖形包的特點、工作原理及開發(fā)流程，基于Vaadin開發(fā)框架，設計并實現(xiàn)了轉(zhuǎn)子動平衡計算數(shù)據(jù)的動態(tài)圖形顯示。實例應用表明，JFreeChart在數(shù)據(jù)圖表實現(xiàn)時，不僅顯著提高了開發(fā)效率，也兼顧了不同終端的用戶體驗。

關鍵詞：JFreeChart；圖表；Vaadin；用戶體驗

DOIDOI：10.11907/rjdk.171651

中圖分類號：TP319文獻標識碼：A文章編號：16727800（2017）010016204

0引言

傳統(tǒng)的轉(zhuǎn)子動平衡計算都是簡單以數(shù)據(jù)來表現(xiàn)，缺少直觀生動的表現(xiàn)力，而其計算結果的顯示、分析及指導動平衡塊安裝所面臨的首要任務就是將計算結果可視化。傳統(tǒng)的Web圖表繪制都是采用胖客戶端的形式[1]，如Applet，這種形式通常需要在客戶機上安裝相應的運行插件（如Flash插件），服務端將數(shù)據(jù)傳遞客戶端，客戶端接收數(shù)據(jù)繪制相應圖表。由于圖表在客戶端生成，其對客戶端要求比較高，無法滿足不同終端、不同平臺的用戶體驗，而且速度比較慢，無法適應現(xiàn)代高速互聯(lián)網(wǎng)的發(fā)展。

隨著信息技術的發(fā)展，瘦客戶端圖表繪制形式逐漸成為主流，即服務端直接將運算數(shù)據(jù)生成的圖像傳遞給客戶端，客戶端無需處理數(shù)據(jù)，圖表在Web瀏覽器即可動態(tài)顯示[2]。目前基于該形式的Web圖表繪制組件較多，如JFreeChart、FusionCharts與Open Flash Chart等，其中JFreeChart以其強大的功能、出色的制圖效果及便捷的操作方法在Java領域已得到廣泛應用，特別是其與Vaadin開發(fā)框架的結合，應用于Web APP的開發(fā)，實現(xiàn)了業(yè)務層與表現(xiàn)層的代碼分離，大幅降低了開發(fā)人員的開發(fā)量與維護量。本文通過結合JFreeChart開源圖形包的特點、工作原理及開發(fā)流程，基于Vaadin開發(fā)框架，設計并實現(xiàn)了轉(zhuǎn)子動平衡計算數(shù)據(jù)的動態(tài)圖形顯示。

1JFreeChart概述與研究進展

1.1功能特性

JFreeChart是Java中開源的制圖組件，主要用于生成各種動態(tài)圖表。在Java的圖形報表技術中，JFreeChart組件提供了方便、快捷、靈活的制圖方法，能夠生成各種各樣的圖形報表，如提供餅圖（二維/三維）、柱狀圖（水平/垂直）、線圖、點圖、時間變化圖、甘特圖、股票行情圖、混和圖、溫度計圖、刻度圖等常用商用圖表，顯示在應用程序中。JFreeChart廣泛的功能包括：豐富的API，支持各種各樣的圖表類型；靈活的設計，易于擴展，適應服務器端與客戶端的應用；支持多種類型的輸出，包括Swing界面、圖像文件（包括PNG、JPEG格式）與矢量圖形文件格式。

JFreeChart主要特征如下：①定義接口的任何實現(xiàn)通俗易懂；②易于導出PNG與JPEG圖像文件格式（也可以使用Java的圖像I/O類庫生成類庫支持的任何格式），使用Graphics2D工具導出其它格式；③使用iText工具導出PDF格式文件，使用Batik工具導出SVG格式文件；④圖像工具欄，圖像豐富、美觀；⑤圖表支持鼠標事件，支持注解；⑥產(chǎn)生HTML圖像映射；⑦支持JDBC，可動態(tài)顯示來自多種數(shù)據(jù)庫的數(shù)據(jù)；⑧可以工作于Application/Servlets/Jsp/Applets等環(huán)境；⑨完全開源，嚴格遵守GNU的通用公共認證協(xié)議。

1.2工作原理及開發(fā)流程

基于JFreeChart的瘦客戶端圖形繪制組件工作原理如下：客戶端（Client）通過Web瀏覽器向服務器端（Server）發(fā)送應用請求，服務器端接受請求后，基于用戶業(yè)務邏輯需求，從客戶端提供的數(shù)據(jù)或數(shù)據(jù)接口中獲取相關數(shù)據(jù)，在服務器端經(jīng)過數(shù)據(jù)整理后，構造圖表所需的數(shù)據(jù)集，并由JFreeChart引擎加載此數(shù)據(jù)集，在服務器端生成臨時圖片文件，將圖片的地址返回給客戶端瀏覽器，以圖片形式顯示在Web瀏覽器上[3]，如圖1所示。

JFreeChart的開發(fā)流程如圖2所示。

1.3研究進展

基于JFreeChart強大的功能特性及成熟的技術支持，眾多軟件開發(fā)者將其應用于不同終端的應用程序開發(fā)，并取得了顯著的研究成果。文獻[4]研究了JFreeChart繪制圖形的方法及開發(fā)流程，并繪制出某石油公司用電數(shù)據(jù)統(tǒng)計曲線圖。文獻[5]基于J2EE技術的B/S架構模式，采用Struts與Hibernate的輕量級框架結構，應用JFreeChart將報表數(shù)據(jù)動態(tài)生成多樣化、直觀化的年度、月度、日度圖形報表。文獻[6]指出Applet圖形繪制的安全隱患，將JFreeChart應用于JSP圖形開發(fā)，實現(xiàn)了JFreeChart圖表的共享與在線更新。文獻[7]將JFreeChart的Java動態(tài)圖形報表技術應用于鐵路機車運行狀態(tài)中，實現(xiàn)了對機車設備的遠程監(jiān)視。基于JFreeChart繪制Web統(tǒng)計圖表，不僅提高了開發(fā)效率，也降低了項目成本。由于對JFreeChart API的封裝，開發(fā)人員在作擴展時，無需再過多地關注于繁瑣的JFreeChart API，從而能將更多時間、精力投入到具體的業(yè)務邏輯上[8]。

目前，JFreeChart已廣泛應用于J2EE、Struts、Spring和Hibernate等開發(fā)框架，但基于前端的Vaadin開發(fā)框架開發(fā)Web APP應用程序時應用較少。本文將JFreeChart與Vaadin結合，設計并實現(xiàn)了轉(zhuǎn)子動平衡計算數(shù)據(jù)的動態(tài)圖形顯示，為動平衡塊的安裝提供了直觀形象的指導。endprint

2系統(tǒng)開發(fā)與應用

2.1開發(fā)框架

為實現(xiàn)轉(zhuǎn)子動平衡計算在智能手機、PAD等移動終端的應用需求，同時兼顧系統(tǒng)交互性與功能性，系統(tǒng)基于Vaadin開發(fā)框架設計與實現(xiàn)。Vaadin是一個用于創(chuàng)建富客戶端（RIA）應用程序的前端開發(fā)框架[9]，應用程序在不同終端與平臺實現(xiàn)時都基于相同的框架，其具有種類豐富與功能完善的界面表現(xiàn)、靈活的數(shù)據(jù)監(jiān)聽處理功能，同時能兼顧跨平臺、跨終端的觸屏交互、動畫切換等移動特性。

系統(tǒng)所有的計算功能都在Web服務器端實現(xiàn)，用戶通過Web瀏覽器與系統(tǒng)交互，Vaadin客戶端引擎將原始數(shù)據(jù)發(fā)送給Servlet容器中的終端適配器，終端適配器通過Web服務器接收來自客戶端的用戶請求，調(diào)用相應的計算模塊，將用戶請求轉(zhuǎn)換為特定會話中的用戶事件。每個用戶事件都與服務器端的相應UI組件關聯(lián)，終端適配器會根據(jù)UI組件的改變生成相應的響應，并發(fā)送到客戶端的Web瀏覽器中?？蛻舳藶g覽器中的客戶端引擎接收該響應，并將響應內(nèi)容渲染在Web頁面的UI界面上[10]。

以動平衡試重計算為例，如圖3所示，當用戶輸入基本參數(shù)之后，系統(tǒng)UI組件檢測用戶輸入合法性，檢測到非法輸入將出現(xiàn)提示信息。用戶輸入正確數(shù)據(jù)后，點擊“計算”按鈕，綁定在“計算”按鈕組件上的監(jiān)聽器會立即觸發(fā)Button.ClickEvent事件，并通過HTTP連接以事件的形式將原始輸入數(shù)據(jù)傳回服務器端組件。服務器端組件再將該事件轉(zhuǎn)送應用程序的邏輯處理代碼，通過監(jiān)聽邏輯代碼中的事件處理邏輯（Button.ClickListener監(jiān)聽事件），首先獲取用戶輸入的原始數(shù)據(jù)，轉(zhuǎn)換輸入字符串為數(shù)值，調(diào)用相應的計算模塊處理數(shù)據(jù)，再將計算結果綁定到UI組件上，服務器端UI組件狀態(tài)發(fā)生變化，終端適配器發(fā)送相應響應，客戶端的Web瀏覽器接收該響應并進行渲染，如繪制平衡塊安裝示意圖。

2.2關鍵技術

（1）基于Vaadin的轉(zhuǎn)子動平衡計算系統(tǒng)，其功能表現(xiàn)為用戶輸入數(shù)據(jù)、顯示計算結果與繪制平衡塊安裝示意圖。系統(tǒng)采用基于Vaadin的B/S技術架構模式，并利用Vaadin的MVC分層設計模式，前臺界面顯示層、邏輯業(yè)務層的代碼是完全分離的，只有當程序運行時，具體的View層才與相應的Mode層進行綁定，完成相應的業(yè)務邏輯功能，從而提高系統(tǒng)的靈活性與復用性。

（2）Vaadin作為一種創(chuàng)建富客戶端（RIA）應用程序的中間組件，具有很高的可擴展性，所以除了Vaadin本身提供的組件之外，還可以非常方便地使用第三方Widget。在Vaadin Directory中可以找到數(shù)百個插件（Add-on），JFreeChartWrapper便是一個將JFreeChart應用于Vaadin的插件，JFreeChart在Vaadin中的工作流程如圖4。

3系統(tǒng)實現(xiàn)

3.1在Vaadin中配置

JFreeChart在Vaadin中配置，主要是在Vaadin項目配置文件pox.xml中設置，如圖5所示，配置完成后Vaadin將直接從Vaadin Directory中下載相關插件。

3.2在Vaadin中實現(xiàn)

轉(zhuǎn)子動平衡塊的安裝圖示，需要在極坐標圖上表明轉(zhuǎn)子的旋轉(zhuǎn)方向、鍵槽的位置、坐標軸的角度以及平衡塊的質(zhì)量和角度等參數(shù)。加重的角度是以鍵相槽為零位、逆轉(zhuǎn)子旋轉(zhuǎn)方向轉(zhuǎn)動的角度。因此，平衡塊的安裝示意圖主要是基于JFreeChart繪制極坐標圖，并作相應的圖形標識。

3.2.1關聯(lián)數(shù)據(jù)集Dataset

轉(zhuǎn)子動平衡計算結果都是以矢量表示，大小為平衡塊質(zhì)量，方向為平衡塊安裝角度，極坐標數(shù)據(jù)集為矢量數(shù)據(jù)集，其創(chuàng)建過程如下：

public XYDataset createDataset（VectorBal[] vectorBal， String[] str） {

//vectorBal為動平衡計算結果的矢量數(shù)據(jù)集，str為數(shù)據(jù)集名稱標識數(shù)組；

XYSeriesCollection result = new XYSeriesCollection（）；

XYSeries ser[]=new XYSeries[str.length]；

for（int i=0； i

ser[i] = new XYSeries（str[i]）； //創(chuàng)建不同曲線數(shù)據(jù)

ser[i].add（0， 0）； //加入坐標原點

ser[i].add（（90-vectorBal[i].getpha（）+360）%360， 25）； //加入矢量數(shù)據(jù)

result.addSeries（ser[i]）； //加入數(shù)據(jù)集

}

return result；

}

3.2.2極坐標圖繪制

由于JFreeChart極坐標圖PolarPlot的角度是以豎軸上方為零位，而轉(zhuǎn)子動平衡塊安裝示意圖是以橫軸右側為零位逆時針方向定角度的。因此，需要對PolarPlot的坐標軸進行順時針旋轉(zhuǎn)90°，即：θ'=90-θ，并重寫PolarPlot的refreshAngleTicks（）方法，更改坐標軸角度標簽顯示，其實現(xiàn)過程如下：

private JFreeChart createChart（XYDataset dataset） {

…………

PolarPlot plot = new PolarPlot（dataset， radiusAxis， renderer） {

@Override

protected List refreshAngleTicks（） {

List ticks = new ArrayList（）；

int delta = （int） this.getAngleTickUnit（）.getSize（）；

for （int t = 0； t < 360； t += delta） {

int tp = （360 + 90 - t） % 360； //旋轉(zhuǎn)坐標軸

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內(nèi)置圖表的組件。JFreeChart利用JFreeChartWrapper在瀏覽器圖表中渲染為SVG，使圖表非常清晰。對于IE（不支持SVG）圖表則呈現(xiàn)為PNG柵格圖像，其實現(xiàn)過程如下：

public HanssonChart（String title， VectorBal[] vectorBal， String[] str） {

…………

setCaption（title）； //設置標題

JFreeChart chart = createChart（createDataset（vectorBal，str））； //創(chuàng)建極坐標圖實例

chart.setBackgroundPaint（Color.WHITE）； //設置背景顏色

JFreeChartWrapper wrapper = new JFreeChartWrapper（chart）；

// 在Vaadin中利用JFreeChartWrapper打包JFreeChart圖輸出

…………

}

3.2.4實例應用

轉(zhuǎn)子動平衡計算系統(tǒng)根據(jù)所要實現(xiàn)的單面平衡、雙面平衡、多面平衡、輔助功能等功能模塊，利用Vaadin所提供的各種組件與布局方式設置系統(tǒng)界面。每個功能模塊設置子功能模塊導航，用戶可根據(jù)需要進行操作，單面平衡功能界面如圖6所示。

用戶進入雙面平衡模塊后，選擇影響系數(shù)法，步驟如下：①輸入原始振動“振幅”與“相位”；②輸入試加重“質(zhì)量”與安裝“角度”；③輸入試加重后“振幅”與“相位”。

點擊“計算”按鈕，系統(tǒng)將計算出影響系數(shù)、校核質(zhì)量（保留試重/去掉試重）及自動顯示平衡塊安裝示意圖，如圖7所示。

4結論

（1）對JFreeChart圖形開發(fā)組件的功能特性與開發(fā)流程進行了相關介紹，并基于Vaadin開發(fā)框架實現(xiàn)了JFreeChart在轉(zhuǎn)子動平衡計算系統(tǒng)圖形開發(fā)中的應用，以提高開發(fā)效率和減輕開發(fā)量。

（2）開源JFreeChart是目前較為流行的免費輕量級Web圖表制作工具，其豐富的圖形表現(xiàn)力與渲染力，能實現(xiàn)良好的交互性，突顯了JFreeChart在Web APP應用開發(fā)方面所擁有的優(yōu)勢。

（3）JFreeChart是純Java語言開發(fā)的圖形組件，無需考慮瀏覽器兼容性問題，解決了傳統(tǒng)Web開發(fā)中面臨的客戶端瀏覽器兼容性問題，能滿足用戶差異化、復雜化的需求。

（4）JFreeChart應用于Vaadin開發(fā)框架，實現(xiàn)了業(yè)務層與表現(xiàn)層的代碼分離，可有效減少編程人員的工作量，縮短項目開發(fā)時間，在基于Vaadin開發(fā)框架的Web APP數(shù)據(jù)可視化開發(fā)中擁有廣闊的應用前景。

參考文獻：

＼[1＼]朱賀新，穆榮，盧建軍.JFreeChart的應用開發(fā)與改進[J].西安科技大學學報，2008，28（4）：789792.

[2]李伯宇，趙麗麗.在JSP中實現(xiàn)動態(tài)圖表方法研究[J].計算機應用，2007，23（6）：213214.

[3]番煜，惠燕.JFreeChart在網(wǎng)絡性能管理系統(tǒng)中的應用[J].計算機工程與設計，2008，29（16）： 2325.

[4]任小海，胡宏濤.基于JFreeChart的Web統(tǒng)計圖形繪制方法研究[J].軟件導刊，2009，8（11）：207208.

[5]侯俁，劉萬軍.JFreeChart在Java Web項目中的應用[J].科學技術與工程，2008，8（10）：26992701.

[6]張金水.基于Java的JFreeChart在Internet共享系統(tǒng)中的應用[J].武漢大學學報，2005，51（S2）：105107.

[7]李飛，李銳，王超.JFreeChart在鐵路機車運行監(jiān)視系統(tǒng)中的應用[J].計算機系統(tǒng)應用，2012，21（6）：140143.

[8]陽瑞發(fā)，陶以政.基于JFreeChart繪制Web統(tǒng)計圖表的設計與實現(xiàn)[J].網(wǎng)絡安全技術與應用，2010（12）：6466.

[9]聶金慧，蘇紅旗，劉官樹.基于RIA的Vaadin系統(tǒng)架構與設計模式研究[J].信息網(wǎng)絡安全，2013（8）：3840.

[10]孟慶強，陶時偉，廖婉玲.基于Vaadin的有序用電管理系統(tǒng)的研究與實現(xiàn)[J].計算機應用與軟件，2016（1）：8593.

責任編輯（責任編輯：何麗）