前面写了那么多代码,所在这里我想用最少的代码完成这个功能!用一句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();
}
}
在service输出JfreeChart对象前调用这个方法处理一下,现在图片如下:
现在,你可以将图片样式改成你喜欢的样子啦,如果这个你还不满意的话! 还有最后一步,由你来完成吧,将它整合到系统中,也就是说点击树形菜单节点时要载入这个页面;另外,页面上的起动/停止按钮功能要实现----这不算太难吧。
- 描述:
jFreechart+jPcap实现web界面实时网络流量监控图片
- 大小: 971.6 KB
- RealTimeMontier.war.png (2 MB)
- 描述: 可布署的war文件,布署时去掉.png吧。
注意:第一次启动看不到图片,要安装jPcap,并将jpcap.dll复制到tomcat的bin下。在布署后页面中会有说明。
- 下载次数: 5242
分享到:
相关推荐
python基于51job数据可视化图表展示源码,基于51job工作招聘数据可视化图表展示 web 数据挖掘,ECharts可视化。python基于51job数据可视化图表展示源码,基于51job工作招聘数据可视化图表展示 web 数据挖掘,ECharts...
最近接了个任务需要用H5在前台两个大电视上做两页数据展示公司的产品数据,效果要高大上,还好之前接触过HTML5,所以第一时间想到就是echarts,这个框架对于数据展示尤其图表类处理的还是非常强大和炫酷的。...
数据可视化实战:使用D3设计交互式图表.pdf+源码。
1. 前后端分离:前端 Echarts JavaScript ...2. 数据动态更新:服务端触发数据源的变化,前端AJAX自动获取最新数据并渲染到Echarts图表上; 3. 数据格式:JSON; 更多Python&Echarts版的数据可视化大屏源码: ...
现在的《精通Java Web动态图表编程》大部分是网上订购,有一份电子word文档是不错的选择,本资源含有完整的资源,可不用麻烦的到处找。
基于JAVA开发的血压实时监控app源码+项目说明 毕设:一个血压实时监控app,该app主要功能为与测量设备进行通信,获取测量数据并在客户端进行处理,由服务器进行数据分析,为用户提供健康评估及建议。 蓝牙功能 可以...
flask web 框架 echarts 图表 jinja 模版 三、菜鸟实战 初始化 Flask 框架,设置路由 各行政区房屋均价柱状图分析 echarts 渲染柱状图 各面积区间房屋占比饼状图 echarts 渲染饼状图 运行结果 运行截图 ...
数据可视号图表案例集合项目源码。HTML数据可视化驾驶舱项目案例源码,大数据可视化模板——echarts有关N个html界面。数据可视号图表案例集合项目源码。HTML数据可视化驾驶舱项目案例源码,大数据可视化模板——...
2、该资源包括项目的全部源码,下载可以直接使用! 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能,...
前后端分离的基于Vue数据可视化项目源码+项目说明文档(课程设计).zip 本项目为前后端分离的数据可视化项目 【启动步骤】 1.后端文件夹koa_server $ npm install / cnpm install $ node app.js 2.前端项目 $ npm ...
大数据舆情分析监控平台大屏展示源码 包含实时动态 各图表展示 信息分布
易语言3D化显示硬件运行状态源码例程程序结合易语言应用接口支持库,分别用柱形、圆饼和线性图显示内存、CPU和硬盘的使用状态。本易语言例程源码是易语言论坛用户编写的教程,属于易语言图形图像教程。本易语言例程...
大屏展示后台数据可视化UI界面 大屏展示数据可视化UI界面 大气科技可视化数据界面 大数据监控可视化平台 大数据可视化分析UI 大数据可视化界面大屏展示页面 大数据可视化科技风格环境治理 大数据可视化科技风格数据...
圆形图表展示源码
web 大数据可视化 使用的是echarts图表库,ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,...
001 服务大数据可视化监管平台 002 水质情况实时监测预警系统 003 联心菜市场数据中心 004 政务大数据共享交换平台 005 可视化监控管理 006 全国疫情实时监控 007 惠民服务平台 008 兰州智慧消防大数据平台 009 ...
ArcGIS版的1:5万和1:20万接图表,包含名称和编号,1:5万的还有分省
最近接了个任务需要用H5在前台两个大电视上做两页数据展示公司的产品数据,效果要高大上,还好之前接触过HTML5,所以第一时间想到就是echarts,这个框架对于数据展示尤其图表类处理的还是非常强大和炫酷的。...
30套ECharts+html大数据可视化展示平台模板,页面美观,可以根据自己需求修改数据和样式,适合初学者直接下载使用。