JFreeChart在转子动平衡计算系统图表开发中的应用与实现

2017-11-02 09:34何冬辉叶振起赵奕州
软件导刊 2017年10期
关键词:用户体验图表

何冬辉++叶振起++赵奕州

摘要:传统的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 ticks = new ArrayList();

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.

责任编辑(责任编辑:何丽)

猜你喜欢
用户体验图表
浅谈用户体验在产品设计中的运用
唯品会的品牌塑造研究