highcharts加载数据库数据（java版）

前段时间因为项目需要使用了highcharts报表，新手可以参考http://www.hcharts.cn/，教程中有比较详细的介绍和demo。但是demo中的例子的数据都是静态数据，而在实际项目中一般数据都是从数据库加载的。
下面是我做的一个简单例子，从数据库中加载数据然后在前端使用highcharts渲染。

读取数据库数据使用的servlet，可以根据需要改成其他（如spring等）。servlet主要代码如下：

    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {Connection conn = null;String sql;String url = "jdbc:mysql://192.168.1.203:3306/test?user=opuser&password=opuser1111&useUnicode=true&characterEncoding=UTF8";try {Class.forName("com.mysql.jdbc.Driver");conn = DriverManager.getConnection(url);Statement stmt = conn.createStatement();sql = "select * from test";ResultSet rs = stmt.executeQuery(sql);List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();while (rs.next()) {System.out.println(rs.getString(1) + " " + rs.getString(2) + " " + rs.getString(3));Map<String, Object> map = new HashMap<String, Object>();map.put("datetime", rs.getString(2));map.put("data", Double.parseDouble(rs.getString(3)));list.add(map);}Gson gson = new Gson();String g = gson.toJson(list);PrintWriter out = response.getWriter();  out.println(g);out.flush();out.close();} catch (ClassNotFoundException e) {e.printStackTrace();} catch (SQLException e) {e.printStackTrace();}}

本例中返回的数据格式是json。
程序中使用了mysql和gson的jar包，请自行下载。因为都是比较常用的jar包，在此就不提供下载地址了。

然后是jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>HighChartsTest</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><!-- <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript" src="js/highcharts.js"></script> --> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script><script>//图表属性，不包含数据var options = {chart: {renderTo:'container',type:'spline',},title: {text: '实时温度曲线',x: -20 //center},xAxis:{},yAxis: {title: {text: 'Temperature (°C)'},plotLines: [{value: 0,width: 1,color: '#808080'}]},series: [{name:'温度',}],tooltip: {valueSuffix: '°C'},plotOptions: {spline:{dataLabels: {enabled: true},animation:false,},},};//初始函数，设置定时器，定时取数据$(function () {queryData(0);var i=0;var timer = setInterval(function(){i++;if(i>=3) {i=0;}queryData(i);},3000);//停止刷新$("button").click(function(){clearInterval(timer);});});var categories = [];var datas = [];//Ajax 获取数据并解析创建Highcharts图表function queryData(index) {$.ajax({url:'servlet/HighCharts',type:'get',dataType:"json",success:function(data) {$.each(data,function(i,n){categories[i] = n["datetime"];datas[i] = n["data"];});options.xAxis.categories = categories;options.series[0].data = datas;chart = new Highcharts.Chart(options);}});}</script>
</head><body><div id="container" style="min-width:800px;height:400px;"></div><p align=center><button>停止刷新</button></p></body></html>

代码下载：http://pan.baidu.com/s/1slvI6UL

转载于:https://www.cnblogs.com/zongzhankui/p/5875308.html

highcharts加载数据库数据（java版）相关推荐

springboot 启动加载数据库数据到redis缓存
启动项目后, 加载数据库公共配置数据到redis中 import org.springframework.data.redis.core.RedisTemplate; import org.sprin ...
Jquery导航条淡进淡出相册（动态无刷新加载数据库数据）
原理:AJAX动态加载数据库中图片信息给游览器,利用2个叠词div动态修改内部图片透明度做出淡进淡出效果.(IE6无效) 难点:json数组操作. HTML:就是几个图片容器.加载大图的div pos ...
ECharts3 实现 AJAX异步加载数据库数据
ECharts3的文档里其实对异步加载说的很明白,但是示例都是生成的随机数据,大多数应用是直接读数据库数据然后动态加载到ECharts图表里的,简单的思路就是把需要显示的数据库数据封装成json格式, ...
使用ztree异步加载数据库数据形成树形菜单
-搞了好久好久,在此记录一下这个这个胜利的时刻!!!!作为一个合格的程序员,任重而道远啊- 项目环境:thinkphp5+mysql+ztree 项目目标:从MySQL数据库获取小区用户位置信息.用户 ...
Springboot项目启动时加载数据库数据到内存
使用@PostConstruct注解 @Component public class CodeCache {public static Map<String, String> codeMa ...
Geospark-SQL加载SHP数据
title: (六)Geospark SQL加载SHP数据(JAVA版) date: 2021-05-08 09:29:06 tags: GeoSpark GeoSpark SQL默认是无法读取Shp ...
java项目启动加载数据_java项目启动时加载数据库信息存入缓存方法
一.获取需要加载的数据 @Component public class MathMethod { public void addMethod(int i) { //查询方法存入redis等库 Syst ...
Java实现动态加载页面_[Java教程]动态加载页面数据的小工具 javascript + jQuery （持续更新）...
[Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新) 0 2014-05-07 18:00:06 使用该控件,可以根据url,参数,加载html记录模板(包含 ...
java 手动加载数据库驱动_JAVA加载数据库驱动（JDBC）
JAVA加载数据库驱动(JDBC) 前言之前,对Class.forName("com.mysql.jdbc.Driver");这条动态加载JDBC驱动感觉很疑惑,故有了这篇短文. ...

highcharts加载数据库数据（java版）

highcharts加载数据库数据（java版）相关推荐

最新文章

热门文章