Posted on 2010-07-07 21:01
默认为零 阅读(2054)
评论(0) 编辑 收藏 所属分类:
技术
JFreeChart是一个开源的图表引擎，AJAX是WEB应用中JavaScript和XML相结合的一种异步技术，实现了页面无刷新动态更新的效果，属于WEB2.0的技术范畴。将两者结合起来，把系统的监控统计数据通过JFreeChart以图表形式展现出来，并通过AJAX定时刷新在页面上，就可以实现一种基于WEB的动态实时监控效果。
第一部分，首先从JFreeChart主页下载其开发组件，一般为jfreechart-x.x.xx.zip。解压缩后根目录下有一个jfreechart-x.x.xx-demo.jar，这是一个开发demo包，把它运行起来就可以看到丰富多样的图表展现。运行命令：java -jar jfreechart-x.x.xx-demo.jar。
下面看一个最简单的饼图构造例子（见下图1）：
图1
看一下這個很简单的图是怎么构造的。
首先构造这个饼图的数据集：
DefaultPieDataset pieDataset = new DefaultPieDataset();
pieDataset.setValue("One", 43.2D);
pieDataset.setValue("Two", 10D);
pieDataset.setValue("Three", 27.5D);
pieDataset.setValue("Four", 17.5D);
pieDataset.setValue("Five", 11D);
pieDataset.setValue("Six", 19.4D);
pieDataset就是这个数据集。下面再渲染展现这个数据集的图表对象：
JFreeChart chart = ChartFactory.createPieChart("Pie Chart Demo 2", pieDataset, true, true, false);
PiePlot piePlot = (PiePlot) chart.getPlot();
piePlot.setSectionPaint("One", new Color(160, 160, 255));
piePlot.setSectionPaint("Two", new Color(128, 128, 223));
piePlot.setSectionPaint("Three", new Color(96, 96, 191));
piePlot.setSectionPaint("Four", new Color(64, 64, 159));
piePlot.setSectionPaint("Five", new Color(32, 32, 127));
piePlot.setSectionPaint("Six", new Color(0, 0, 111));
piePlot.setNoDataMessage("No data!"); //无数据时显示
piePlot.setExplodePercent("Two", 0.2D);
piePlot.setLabelGenerator(new StandardPieSectionLabelGenerator("{0} ({2} percent)")); //显示百分占比
piePlot.setLabelBackgroundPaint(new Color(220, 220, 220));
piePlot.setSimpleLabels(true);
piePlot.setInteriorGap(0.0D);
将数据集构造成图表对象chart，而chart的绘图区对象piePlot可以设置成多姿多彩的各种形式。完成这些操作之后，将chart对象通过输出流展现为用户可视界面，即为效果图。在这里需要生成可刷新替换的图片，因此通过org.jfree.chart.servlet.ServletUtilities这个JFreeChart工具类将chart转化成图片生成在磁盘介质上。当然，图片文件应该生成在应用环境中，这样，前端请求后就可以通过应用上下文访问到并返回。
第二部分，即是将已生成的图片通过AJAX技术定时展现到界面上，形成一种动态的监控效果。这里简单介绍下要点，AJAX的实现和不再累述。
页面中预先定义一个图片img对象：
<img id="image" src="<%=request.getContextPath()%>/images/wait.gif" border="0" usemap="#map">
这里wait.gif是一个默认的预设等待效果图。
AJAX异步结果响应后，将返回的图片URL更新到image的src值：
document.getElementById("image").src = "<%=request.getContextPath()%>/" + picURL;
页面客户端加上JavaScript的定时机制后，定时请求后台响应后输出展现，达到了实时监控的效果。
当然，前端的请求与后端的图片构造需要后台技术衔接，比如servlet。servlet给AJAX提供了请求入口，同时它也调用了JFreeChart引擎构造出丰富多彩的数据图表。整理后的简单架构示意图如下：
图2