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

前面写了那么多代码,所在这里我想用最少的代码完成这个功能!用一句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 οnlοad="refeshGraph();">
 <!--监控图片 秒/更新一次-->
 <div id="monitortCharDisplay">服务器设备在线监控:
 <input type="button" id="BTNswitch" value="停 止" οnclick="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对象前调用这个方法处理一下,现在图片如下:

 

 

 

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

 

 

 

 

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 数据可视化计算1!2!...n!的过程中,我们可以利用数据可视化的工具和方法来展现计算过程和结果。 首先,可以使用条形展示每个数字的阶乘结果。将每个数字作为横轴上的标签,将其对应的阶乘结果作为纵轴上的数值,通过条形的高度来表示阶乘的结果大小。通过不断增加横轴上的数字,可以逐步展示不同阶乘结果的大小变化情况。 其次,可以利用折线来描绘阶乘结果的变化趋势。将横轴上的坐标表示为计算的步骤或阶数,纵轴上的坐标表示阶乘结果的大小,通过折线连接不同的数据点,形成连续的曲线,从而反映出阶乘结果的递增趋势。 此外,还可以通过饼来比较不同阶乘结果所占的比例。将每个数字的阶乘结果作为不同的扇区,通过扇区的大小来表示其所占的比例。通过将所有扇区组合在一起,可以形成一个完整的饼,从而展示不同阶乘结果之间的相对大小。 最后,还可以将计算过程可视化为动画或演示。通过逐步展示每个数字的阶乘结果,在不同数字之间添加过渡效果,可以将整个计算过程表现得更加生动和有趣。 通过数据可视化的方式展示数据的计算过程和结果,可以使人们更直观地理解阶乘的特点和计算过程,并能够更好地比较不同阶乘结果的大小和趋势。 ### 回答2: 数据可视化计算1! 2! ... n!可以通过图表或可视化工具来展示每个数字的阶乘结果。这可以帮助我们更直观地了解每个数字的阶乘的大小和增长趋势。 一种常用的方式是使用柱状。我们可以将数字n作为x轴,将对应的n!作为y轴,然后用垂直的柱状图表示每个数字的阶乘结果。柱子的高度表示阶乘的大小,因此可以通过比较柱子的高度来判断阶乘的增长程度。通过这样的可视化方式,我们可以更清晰地看到每个数字阶乘的差异和随着n增大阶乘的增长速度。 另一种方式是使用折线。我们可以将数字n作为x轴,将对应的n!作为y轴,然后用折线将每个数字的阶乘结果连接起来。这样可以更直观地显示阶乘的增长轨迹。通过观察折线的斜率和曲线的形状,我们可以进一步了解阶乘的增长速度和规律。 除了柱状和折线,还可以使用其他形式的可视化工具,如雷达、饼等。不同的可视化方式可以强调阶乘结果的不同特点和规律。 综上所述,通过数据可视化计算1! 2! ... n!,我们可以更直观地了解每个数字的阶乘结果和随着n的增大阶乘的增长情况。这样的可视化可以帮助我们更好地理解和分析数据,并从中获得有用的信息。 ### 回答3: 数据可视化计算1! 2! ... n!。对于给定的整数n,我们可以使用数据可视化的方法来计算1! 2! ... n!。首先,我们需要明确阶乘的含义。阶乘n!表示从1到n的所有整数的乘积。例如,4!= 1 * 2 * 3 * 4 = 24。 为了计算1! 2! ... n!,我们可以使用一个图表或一个横轴表示数字n,纵轴表示相应的阶乘。首先,设置初始点为(1, 1),这是由于1的阶乘为1。然后,我们可以通过将当前点的纵坐标乘以下一个整数来计算下一个点的坐标,即(2, 2),以此类推。 我们可以继续这个过程,直到达到所需的整数n。通过将这些计算点绘制在图表上,我们可以在图表中观察到由1到n的阶乘组成的曲线。 这个图表可以用来直观地展示阶乘的增长趋势。我们可以看到,阶乘的值随着n的增加而呈指数级增长。在图表上,我们可以观察到曲线的斜率逐渐增加,显示出阶乘函数的迅速增长。 通过数据可视化计算1! 2! ... n!,我们可以更好地理解阶乘的特性和增长率。这种方法不仅可以帮助我们计算阶乘,还可以用于其他数学函数或问题的可视化计算。数据可视化的优势在于提供了一种直观的视觉方式来理解和分析数学问题,使复杂的计算过程更易于理解和解释。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值