浏览 9105 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-02-28
前面写了那么多代码，所在这里我想用最少的代码完成这个功能！用一句js脚本，定时请求生成图片的Servlet并将图片更新到页面中，displayMonitorChart.html页页代码如下：
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<link rel="stylesheet" type="text/css" href="generic.css" />
<title>网络实时数据流量监控 @NetJava.cn</title>
</head>
<script type="text/javascript">
//默认为未启动
var isStart=false;
//连续请求的标识
var autoRefrehID;
//用户点击启动监控按钮
function startMonitorPage(){
alert("这是留给你的任务！");
}
//自动刷新页面图片的js
function refeshGraph(){
document.all.monitorChart.src="servlet/MonitorChartServlet?daadsf="+new Date();
setTimeout("refeshGraph()",1000);
}
</script>
<!-- 页面装载时即启动图片刷新 -->
<body onload="refeshGraph();">
<!--监控图片 秒/更新一次-->
<div id="monitortCharDisplay">服务器设备在线监控：
<input type="button" id="BTNswitch" value="停 止" onclick="startMonitorPage();"/>
</div>
<hr>
<!--要刷新的图片组件 -->
<img id="monitorChart"></body>
</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();
}
}
现在，你可以将图片样式改成你喜欢的样子啦，如果这个你还不满意的话！ 还有最后一步，由你来完成吧，将它整合到系统中，也就是说点击树形菜单节点时要载入这个页面；另外，页面上的起动/停止按钮功能要实现----这不算太难吧。
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-03-04
页面中设定每隔1秒刷新一次图片。。。。这可不算实时
web方式实现本身就不是那么可靠 |
| 返回顶楼 | |
|
发表时间：2008-03-05
amozon 写道 页面中设定每隔1秒刷新一次图片。。。。这可不算实时
web方式实现本身就不是那么可靠 我觉得这个方法很不错，web方式本身就是远程的，要完全实现适时是不现实的 |
| 返回顶楼 | |
|
发表时间：2008-03-06
vml，svg之类的不是都很好吗。。。
|
| 返回顶楼 | |
|
发表时间：2008-03-06
基于web的实时图表展示，我的思路是分三部分考虑：
1.确定服务器端的数据采集和同步机制： 数据采集要根据业务具体需求而定，但要保证不同客户端同一时间点上数据的同步. 2.确定服务器到客户端的数据传输方式： 只要是使用http协议(web上)，就只能是客户端拉数据下来，就只能发js或ajax请求(在浏览器不装插件的前提下)。如果采用面向连结的基于Scoket的通信，可以互发异步消息，那么到客户端的数据实时性会更强---也就无法基于web了。 3.确定客户端图表展示方式： 这个可选择性较宽了，jpg,png,vml,svg都可以，只要数据下来了，随你怎么展示（svg MS要装插件吧？）； |
| 返回顶楼 | |
|
发表时间：2008-03-07
不是很喜欢JfreeChart的原因是对服务造成木有太大必要的压力，至于数据采集和数据的同步正如你所说的只要是web形式反而没有什么太大讨论的空间。
至于插件之类的，我觉得这个就看你的业务需要吧，其实flash也是不错的，hohoho。。。 一般来说我个人更倾向于尽量节约服务器的资源：D |
| 返回顶楼 | |
|
发表时间：2008-03-25
干嘛不直接用mrtg呀
|
| 返回顶楼 | |
|
发表时间：2008-04-25
LZ这样的刷新方法，界面看上面会不会抖动？可以用EXTJS的淡如淡出的方式会好点
|
| 返回顶楼 | |
