web实时设备状态的图形化监控之七：页面实时图表展示大功告成！(附源码和布署项目下载)...

前面写了那么多代码，所在这里我想用最少的代码完成这个功能！用一句js脚本，定时请求生成图片的Servlet并将图片更新到页面中，displayMonitorChart.html页页代码如下： 

 

  





 
 
服务器设备在线监控：
 
 
 

 

 

页面中设定每隔1秒刷新一次图片，这样，用户看到的就是一张时间上连续的图片了；要注意的是，js在请求Servlet中后面附加上了一段参数，这是为了防止浏览器缓存上次图片的结果。请求这个页面，如果你看到动态的图片，那么大功告成了！   怎么？图片不漂亮？这简单，在后台写个方法美化JfreeChart图片：

//对生成的线图进行美容的方法
	public void processChart( JFreeChart jfc) {
		try {
            //数据区的表示者
			LineAndShapeRenderer renderer = new LineAndShapeRenderer(); 
			//折点的可见性
			renderer.setShapesVisible(true);
			//折点是否为实体
			//renderer.setShapesFilled(false);
			 //线条粗细
			renderer.setStroke(new BasicStroke(1f));
			renderer.setItemLabelsVisible(true);
			renderer.setBaseItemLabelsVisible(true);
			//线图上的数据是否可见？
			renderer.setSeriesItemLabelGenerator(1,new StandardCategoryItemLabelGenerator());
			renderer.setItemLabelGenerator(new StandardCategoryItemLabelGenerator());
			renderer.setBaseItemLabelGenerator(new StandardCategoryItemLabelGenerator());
            //全图抗锯齿 默认为true  如果为false锐度会高很多
	          jfc.setAntiAlias(true);
	         //  只关闭字体的抗锯齿功能 
	         //设置标题字体
	         jfc.getTitle().setFont(new Font("方正姚体",Font.BOLD,15));
	         //设置示例图文字大小****
jfc.getLegend().setItemFont(new Font("宋体",Font.LAYOUT_NO_LIMIT_CONTEXT,12));
	         //设置示例图背景颜色****
	         jfc.getLegend().setBackgroundPaint(Color.GREEN);
	         // 图表背景色
             jfc.setBackgroundPaint(Color.WHITE);
			    CategoryPlot plot = (CategoryPlot)jfc.getPlot();
			    // 数据区的背景透明度（0.0～1.0）,白色的就无关了
                plot.setBackgroundAlpha(0.8f);
                //数据X轴网格线条颜色
                plot.setRangeGridlinePaint(Color.orange);
                //数据X轴网格线条颜色
                plot.setDomainGridlinePaint(new Color(124, 100, 100));
                //数据X轴网格线条笔触
                 plot.setRangeGridlineStroke(new BasicStroke(0.2f));
                //数据Y轴网格线条笔触
                plot.setDomainGridlineStroke(new BasicStroke(0.1f));
                //给数据区增加数据区的表示者
			    plot.setRenderer(renderer);
		        CategoryAxis domainAxis = plot.getDomainAxis(); 
		        domainAxis.setAxisLineVisible(true);
		        //设置x轴标题字体
	 domainAxis.setLabelFont(new Font("宋体", Font.LAYOUT_NO_LIMIT_CONTEXT, 13));
		        //X轴字体大小 **************
domainAxis.setTickLabelFont(new Font("宋体", Font.LAYOUT_NO_LIMIT_CONTEXT, 10));
		        plot.setDomainAxis(domainAxis); 
                  ValueAxis rangeAxis = plot.getRangeAxis();
		        //设置最高的一个 Item 与图片顶端的距离 
		        rangeAxis.setUpperMargin(0.4);
		        //设置y轴标题字体
		        rangeAxis.setLabelFont(new Font("宋体",Font.LAYOUT_NO_LIMIT_CONTEXT , 13));
		        //Y轴字体大小 **********
		        rangeAxis.setTickLabelFont(new Font("宋体", Font.LAYOUT_NO_LIMIT_CONTEXT, 13));
		        //设置最低的一个 Item 与图片底端的距离 
		        rangeAxis.setLowerMargin(0.2); 
		        plot.setRangeAxis(rangeAxis); 
               // 设置柱的透明度 
		        plot.setForegroundAlpha(1f); 
				plot.setDomainGridlinesVisible(true);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

在service输出JfreeChart对象前调用这个方法处理一下，现在图片如下：

 

 

 

现在，你可以将图片样式改成你喜欢的样子啦，如果这个你还不满意的话！   还有最后一步，由你来完成吧，将它整合到系统中，也就是说点击树形菜单节点时要载入这个页面；另外，页面上的起动/停止按钮功能要实现----这不算太难吧。