1.实现效果图
2.jsp文件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../bootstrap/js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
</head>
<body>
数据库获取的时间:<span id="getTime"></span>
<button id="stopit">停止定时器</button>
<button id="startit">开启定时器</button>
<div id="container" style="min-width:400px; height: 400px;"></div>
<script>
Highcharts.setOptions({
global: {
useUTC: false
}
});
function activeLastPointToolip(chart) {
var points = chart.series[0].points;
chart.tooltip.refresh(points[points.length -1]);
}
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
events: {
load: function () {
//每秒从数据库获取一个数
var series = this.series[0],
chart = this;
//定时器
var iCount = setInterval(function(){
var url = "${pageContext.request.contextPath}/AjaxTimeServlet";
$("#getTime").load(url,function(backData,textStatus,xmlHttpRequest){
var $temperature = parseFloat(backData.substr(0,4));//对传过来的数据进行类型转换
var $time = (new Date(Date.parse((backData.substr(5,21)).replace(/-/g,"/")))).getTime();
//每隔一秒添加进去的数
var x = $time;
y = $temperature;
series.addPoint([x, y], true, true);
activeLastPointToolip(chart)
});
}, 1000);
//关闭定时器
$("#stopit").click(function(){
clearInterval(iCount);
});
}
}
},
title: {
text: '动态模拟实时数据'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: '值'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 1);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: '数据',
data: (function () {
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()+19
});
}
return data;
}())
}]
}, function(c) {
activeLastPointToolip(c)
});
</script>
</body>
</html>
3.功能实现
package com.chinasoft.servlet;
import java.io.IOException;
import java.math.BigDecimal;
import java.sql.SQLException;
import java.text.SimpleDateFormat;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.chinasoft.dao.impl.ImplTemperatureDao;
import com.chinasoft.entity.Temperature;
@WebServlet("/AjaxTimeServlet")
public class AjaxTimeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public AjaxTimeServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Temperature temperature = new Temperature();
// 生成随机温度
Random random = new Random();
float a = random.nextFloat()/2+19;
BigDecimal b =new BigDecimal(a).setScale(1,BigDecimal.ROUND_HALF_UP);
temperature.setTemperature(b+"℃");
ImplTemperatureDao implTemperatureDao = new ImplTemperatureDao();
try {
//插入数据库
implTemperatureDao.addTemperature(temperature);
//读取数据
temperature =implTemperatureDao.findTemperatureById();
//转换时间格式
SimpleDateFormat myFmt=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String time = myFmt.format(temperature.getTime());
//发送
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(temperature.getTemperature());
response.getWriter().write(time);
/*//存储到json中
Map<String,String> map = new HashMap<>();
map.put("temperature", temperature.getTemperature());
map.put("time", time);
String result = JSONObject.fromObject(map).toString();
//发送到客户端
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(result);*/
} catch (SQLException e) {
e.printStackTrace();
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}