JFreeChart在轉(zhuǎn)子動(dòng)平衡計(jì)算系統(tǒng)圖表開(kāi)發(fā)中的應(yīng)用與實(shí)現(xiàn)

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

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

關(guān)鍵詞：JFreeChart；圖表；Vaadin；用戶體驗(yàn)

DOIDOI：10.11907/rjdk.171651

中圖分類號(hào)：TP319文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：16727800（2017）010016204

0引言

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

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

1JFreeChart概述與研究進(jìn)展

1.1功能特性

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

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

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

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

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

1.3研究進(jìn)展

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

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

2系統(tǒng)開(kāi)發(fā)與應(yīng)用

2.1開(kāi)發(fā)框架

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

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

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

2.2關(guān)鍵技術(shù)

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

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

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

3.1在Vaadin中配置

JFreeChart在Vaadin中配置，主要是在Vaadin項(xiàng)目配置文件pox.xml中設(shè)置，如圖5所示，配置完成后Vaadin將直接從Vaadin Directory中下載相關(guān)插件。

3.2在Vaadin中實(shí)現(xiàn)

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

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

轉(zhuǎn)子動(dòng)平衡計(jì)算結(jié)果都是以矢量表示，大小為平衡塊質(zhì)量，方向?yàn)槠胶鈮K安裝角度，極坐標(biāo)數(shù)據(jù)集為矢量數(shù)據(jù)集，其創(chuàng)建過(guò)程如下：

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

//vectorBal為動(dòng)平衡計(jì)算結(jié)果的矢量數(shù)據(jù)集，str為數(shù)據(jù)集名稱標(biāo)識(shí)數(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）； //加入坐標(biāo)原點(diǎn)

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

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

}

return result；

}

3.2.2極坐標(biāo)圖繪制

由于JFreeChart極坐標(biāo)圖PolarPlot的角度是以豎軸上方為零位，而轉(zhuǎn)子動(dòng)平衡塊安裝示意圖是以橫軸右側(cè)為零位逆時(shí)針?lè)较蚨ń嵌鹊摹Ｒ虼耍枰獙?duì)PolarPlot的坐標(biāo)軸進(jìn)行順時(shí)針旋轉(zhuǎn)90°，即：θ'=90-θ，并重寫(xiě)PolarPlot的refreshAngleTicks（）方法，更改坐標(biāo)軸角度標(biāo)簽顯示，其實(shí)現(xiàn)過(guò)程如下：

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)坐標(biāo)軸

NumberTick tick = new NumberTick（

Double.valueOf（t）， String.valueOf（tp）+"°"， //角度標(biāo)簽顯示

TextAnchor.CENTER， TextAnchor.CENTER_RIGHT， 0.0）；

ticks.add（tick）；

}

…………

return ticks；

}

}；

}

3.2.3圖形打包輸出

JFreeChartWrapper加載包是在Vaadin應(yīng)用程序上顯示JFreeChart內(nèi)置圖表的組件。JFreeChart利用JFreeChartWrapper在瀏覽器圖表中渲染為SVG，使圖表非常清晰。對(duì)于IE（不支持SVG）圖表則呈現(xiàn)為PNG柵格圖像，其實(shí)現(xiàn)過(guò)程如下：

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

…………

setCaption（title）； //設(shè)置標(biāo)題

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

chart.setBackgroundPaint（Color.WHITE）； //設(shè)置背景顏色

JFreeChartWrapper wrapper = new JFreeChartWrapper（chart）；

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

…………

}

3.2.4實(shí)例應(yīng)用

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

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

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

4結(jié)論

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

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

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

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

參考文獻(xiàn)：

＼[1＼]朱賀新，穆榮，盧建軍.JFreeChart的應(yīng)用開(kāi)發(fā)與改進(jìn)[J].西安科技大學(xué)學(xué)報(bào)，2008，28（4）：789792.

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

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

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

[5]侯俁，劉萬(wàn)軍.JFreeChart在Java Web項(xiàng)目中的應(yīng)用[J].科學(xué)技術(shù)與工程，2008，8（10）：26992701.

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

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

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

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

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

責(zé)任編輯（責(zé)任編輯：何麗）