动态从数据库获取数据实时插入图表

最新推荐文章于 2024-05-05 17:26:18 发布

Java_jfei

最新推荐文章于 2024-05-05 17:26:18 发布

阅读量6.1k

点赞数 10

分类专栏：项目文章标签：动态图表实时插入

本文链接：https://blog.csdn.net/Java_jfei/article/details/70148512

版权

项目专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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);
	}

}

Java_jfei

关注

10
点赞
踩
32

收藏

觉得还不错? 一键收藏
6
评论
动态从数据库获取数据实时插入图表

1.实现效果图2.jsp文件<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>Insert title here 数据库获取的时间：停止定时器开启定时器 Highcharts.set
复制链接

扫一扫