聊聊、Highcharts 动态数据

 最近项目中需要用到图表，找了几个开源框架，最后选择 Highcharts，原因是 Highcharts 功能强大，稳定，方便，而且开源，社区比较成熟。

 首先下载 Highcharts，导入项目。

 在 HTML 页面引入相应的 Js 文件。我这个项目是情绪监控相关，所谓情绪也就是热点的意思。大数据团队通过爬虫，先从数据库词典里拿到比较靠前的几个行业名称，然后通过爬虫在网上抓取这几个行业的热度值。每天固定时间抓取，统计一次。 

<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><title>情绪监控页</title><script src="../../Highcharts/code/highcharts.js" type="text/javascript"></script><script src="../../Highcharts/code/modules/exporting.js" type="text/javascript"></script><script src="../../KJAF2/js/base/jquery.js" type="text/javascript"></script><script src="../../KJAF2/js/base/jquery.cookie.js" type="text/javascript"></script><script src="../../KJAF2/js/base/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script><script src="../../KJAF2/js/base/jquery.ztree.js" type="text/javascript"></script><style type="text/css">#container {width: 800px;height: 600px;margin: 0 auto}</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">var chart = null; // 定义全局变量
    $(document).ready(function() {chart = new Highcharts.Chart({chart : {renderTo : 'container',events : {load : requestData}},title : {text : '情绪监控'},subtitle : {text : 'www.xxx.com'},legend : {layout : 'vertical',align : 'right',verticalAlign : 'middle',borderWidth : 0},xAxis : {title : {text : 'thetime'},categories : []},yAxis : {tickInterval : 0.5,max : 20,min : -20,title : {text : 'weight'}},series : [{name : '汽车零部件'}, {name : '专用设备'}, {name : '建筑装饰'}, {name : '计算机设备'}, {name : '传媒'}, {name : '仪器仪表'}, {name : '电子制造'}, {name : '通信设备'}, {name : '光学光电子'}, {name : '化工新材料'} ]});});function requestData() {$.ajax({url: '../../emotion/xxx/handle.do',type : 'GET',dataType : 'json',contentType : 'application/json',success: function(point) {var tempArr0 = [0,0,0,0,0,0,0,0,0,0,0,0];var tempArr1 = [0,0,0,0,0,0,0,0,0,0,0,0];var tempArr2 = [0,0,0,0,0,0,0,0,0,0,0,0];var tempArr3 = [0,0,0,0,0,0,0,0,0,0,0,0];var tempArr4 = [0,0,0,0,0,0,0,0,0,0,0,0];var tempArr5 = [0,0,0,0,0,0,0,0,0,0,0,0];var tempArr6 = [0,0,0,0,0,0,0,0,0,0,0,0];var tempArr7 = [0,0,0,0,0,0,0,0,0,0,0,0];var tempArr8 = [0,0,0,0,0,0,0,0,0,0,0,0];var tempArr9 = [0,0,0,0,0,0,0,0,0,0,0,0];var times = [];var timeMap = point[point.length-1].timeMap;$.each(timeMap,function(m,obj){times.push(obj);});$.each(point,function(m,obj){if(obj.type == 0){tempArr0[obj.time]=obj.weight;}else if(obj.type == 1){tempArr1[obj.time]=obj.weight;}else if(obj.type == 2){tempArr2[obj.time]=obj.weight;}else if(obj.type == 3){tempArr3[obj.time]=obj.weight;}else if(obj.type == 4){tempArr4[obj.time]=obj.weight;}else if(obj.type == 5){tempArr5[obj.time]=obj.weight;}else if(obj.type == 6){tempArr6[obj.time]=obj.weight;}else if(obj.type == 7){tempArr7[obj.time]=obj.weight;}else if(obj.type == 8){tempArr8[obj.time]=obj.weight;}else if(obj.type == 9){tempArr9[obj.time]=obj.weight;}});chart.series[0].setData(tempArr0);chart.series[1].setData(tempArr1);chart.series[2].setData(tempArr2);chart.series[3].setData(tempArr3);chart.series[4].setData(tempArr4);chart.series[5].setData(tempArr5);chart.series[6].setData(tempArr6);chart.series[7].setData(tempArr7);chart.series[8].setData(tempArr8);chart.series[9].setData(tempArr9);times = times.reverse();chart.xAxis[0].setCategories(times);// 一秒后继续调用本函数
                setTimeout(requestData, 600000);},cache: false});}</script></body>
</html>

 整个页面，600s 刷新一次，动态数据通过 Json 从后台以 get 方式获取。后台则就是一个 Spring Controller。这个页面则要注意几点。xAxis 轴的 categories 动态获取，动态插入值则需要写成 chart.xAxis[0].setCategories(times)。chart.xAxis 是不行的。 

package com.szkingdom.lakala.system.handler;import com.alibaba.fastjson.JSON;
import com.szkingdom.lakala.common.util.SpringContextUtil;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationContext;
import org.springframework.context.annotation.Scope;
import org.springframework.context.support.ClassPathXmlApplicationContext;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;/*** EmotionHandler* 情绪监控处理类* xums* 2017-08-14-下午4:38*/@Controller
@Scope("prototype")
@RequestMapping("/emotion")
public class EmotionHandler {private Logger log = LoggerFactory.getLogger(getClass());@Autowiredpublic JdbcTemplate emotionJdbcTemplate;@RequestMapping(value = "/xxx/handle.do", produces = "application/json;charset=UTF-8")@ResponseBodypublic String handle(HttpServletRequest request, HttpServletResponse response) {log.info("【情绪监控控制类】...EmotionHandler...handle...");List<Map<String, Object>> finalList = new ArrayList<Map<String, Object>>();try {List<String> timeList = emotionJdbcTemplate.queryForList("select distinct thetime from table order by thetime desc limit 12", String.class);Map<String, Object> timeMap = new HashMap<String, Object>();timeMap.put("timeMap", timeList);Map<String, String> timeSortMap = new HashMap<String, String>();int n = timeList.size();StringBuilder builder = new StringBuilder();for (String time : timeList) {builder.append("'").append(time).append("'").append(",");timeSortMap.put(time,String.valueOf(--n));}String time = builder.toString();time = time.substring(0,time.lastIndexOf(","));List<Map<String, Object>> list = emotionJdbcTemplate.queryForList("select * from table where thetime in ("+time+") group by category,thetime desc");for (Map<String, Object> map : list) {String category = (String) map.get("category");String theTime = (String) map.get("thetime");if ("汽车零部件".equals(category)) {map.put("type", "0");} else if ("专用设备".equals(category)) {map.put("type", "1");} else if ("建筑装饰".equals(category)) {map.put("type", "2");} else if ("计算机设备".equals(category)) {map.put("type", "3");} else if ("传媒".equals(category)) {map.put("type", "4");} else if ("仪器仪表".equals(category)) {map.put("type", "5");} else if ("电子制造".equals(category)) {map.put("type", "6");} else if ("通信设备".equals(category)) {map.put("type", "7");} else if ("光学光电子".equals(category)) {map.put("type", "8");} else if ("化工新材料".equals(category)) {map.put("type", "9");} else {continue;}map.put("time", timeSortMap.get(theTime));finalList.add(map);}finalList.add(timeMap);} catch (Exception e) {log.error("【情绪监控控制类】...EmotionHandler...handle...异常..." + e.getMessage());}String jsonStr = getSuccResult(finalList);System.out.println(jsonStr);return jsonStr;}protected String getSuccResult(Object o) {String ss = JSON.toJSONString(o);return ss;}}

 后台则需要注意，produces = "application/json;charset=UTF-8" ，这里很重要。关于 Mysql 数据源的配置，这里就不写了。比较简单。我这里直接用的 org.springframework.jdbc.core.JdbcTemplate，数据源用 c3p0。 

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd"><bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource" destroy-method="close"><!-- Connection Info --><property name="driverClass" value="${masterEmotion.jdbc.driver}"></property><property name="jdbcUrl" value="${masterEmotion.jdbc.url}"></property><property name="user" value="${masterEmotion.jdbc.username}"></property><property name="password" value="${masterEmotion.jdbc.password}"></property><property name="maxPoolSize" value="20"></property><property name="minPoolSize" value="3"></property><property name="maxIdleTime" value="1800" /><property name="initialPoolSize" value="3"></property><property name="autoCommitOnClose" value="false" /></bean><bean id="emotionJdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate"><property name="dataSource" ref="dataSources"/></bean></beans>

 

 最终结果

 

  

 感谢大家观看！

 

转载于:https://www.cnblogs.com/xums/p/7442068.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/467825.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

你知道用git打补丁吗？

你知道用git打补丁吗？

#常规操作一个常规的使用git 生成补丁的方式git diff ./ > xxx.patch patch -p1 < xxx.patch但是这样生成的补丁有一个问题&#xff0c;这个是差分形式的diff --git a/kernel-4.4/drivers/input/touchscreen/goodix.c b/kernel-4.4/drivers/input/touchscreen/goodix.c i…
阅读更多...
windows 禁用ipv6服务_Win10如何关闭IPV6？Win10禁用IPv6的方法

windows 禁用ipv6服务_Win10如何关闭IPV6？Win10禁用IPv6的方法

在Win10系统中默认开启IPV6&#xff0c;不过这个协议暂时我们还用不到。而且开启该协议有时对系统运行有一定的影响&#xff0c;一些网卡还会因为IPv6出现系统未响应&#xff0c;假死等情况&#xff0c;那么Win10系统怎么关闭IPV6&#xff1f;下面小编就给大家带来Win10禁用IPv…
阅读更多...
概率论与贝叶斯先验

概率论与贝叶斯先验

文章目录概率论与贝叶斯先验概率论基础问题代码图像本福特定律应用&#xff1a;公路堵车模型代码模型初速不同&#xff1a;影响不大减速概率&#xff1a;影响大应用&#xff1a;商品推荐解答概率公式应用样本贝叶斯公式分布两点分布二项分布泊松分布期望和方差表示强度应用均匀…
阅读更多...
vue项目导入外部css样式和js文件

vue项目导入外部css样式和js文件

转自&#xff1a;http://blog.csdn.net/xiejunna/article/details/54943957 css文件放入static文件夹下。 转载于:https://www.cnblogs.com/ourLifes/p/7444074.html
阅读更多...
Linux内核0.12完全注释

Linux内核0.12完全注释

推荐一本书 Linux 0.12内核完全注释 先把麻雀解剖了&#xff0c;再去研究老鹰和飞机可能会更好。现在市面的很多书籍都是基于比较新的内核讲解的&#xff0c;2.6的内核或者4.4的内核&#xff0c;因为内核版本越高&#xff0c;里面的东西就越多&#xff0c;想要讲解明白就需要花…
阅读更多...
iangularjs 模板,AngularJS模板中的三元运算符

iangularjs 模板,AngularJS模板中的三元运算符

How do you do a ternary with AngularJS (in the templates)?It would be nice to use some in html attributes (classes and style) instead of creating and calling a function of the controller.解决方案Update: Angular 1.1.5 added a ternary operator, so now we ca…
阅读更多...
矩阵和线性代数

矩阵和线性代数

文章目录矩阵和线性代数矩阵SVD提法举例推导代码分解效果方阵行列式范德蒙行列式作用代数余子式伴随矩阵方阵的逆矩阵乘法模型举例概率转移矩阵平稳分布&#xff1a;向量乘法矩阵的秩秩与方程组的解推论向量组等价系数矩阵对CAB重认识正交阵特征值和特征向量性质不同特征值对应…
阅读更多...
对比一段ADC键值读取的代码

对比一段ADC键值读取的代码

最近接触到的一个代码&#xff0c;这个代码看起来很简单&#xff0c;但是却蕴藏了人类的智慧与结晶。正是这些不断产生的智慧与结晶&#xff0c;让我们的电子产品越来越稳定&#xff0c;越来越智能。周五了&#xff0c;评论文章&#xff0c;选两个同学赠送书籍《Linux内核完全剖…
阅读更多...
HTML5权威指南 11.通信API

HTML5权威指南 11.通信API

1 <!DOCTYPE html>2 <html>3 4 <head>5 <meta charset"UTF-8">6 <title></title>7 <script type"text/javascript">8 //&#xff08;1&#xff09;监听message事件9 window.addEve…
阅读更多...
在线登记系统代码 php_PHP框架实现WebSocket在线聊天通讯系统

在线登记系统代码 php_PHP框架实现WebSocket在线聊天通讯系统

ThinkPHP使用Swoole需要安装think-swooleComposer包&#xff0c;前提系统已经安装好了SwoolePECL拓展tp5的项目根目录下执行composer命令安装think-swoole&#xff1a;composerrequiretopthink/think-swoole话不多说&#xff0c;直接上代码&#xff1a;新建WebSocket.php控制器…
阅读更多...
Java：抽象类笔记

Java：抽象类笔记

抽象类&#xff1a;类中没有包含足够的信息来描绘一个具体的对象。 为什么要创建抽象类&#xff1f; 为了更好的继承&#xff0c;以后能更好的扩展&#xff0c;减少类与类之间的耦合。 什么时候需要创建一个抽象类&#xff1f; &#xff08;简单粗暴的理解&#xff09;某个方法…
阅读更多...
ios触摸超出_iOS开发笔记之多点触控（一）处理触摸的4个方法

ios触摸超出_iOS开发笔记之多点触控（一）处理触摸的4个方法

多点触控乃苹果公司带给世界的创新之首&#xff0c;作为移动开发者&#xff0c;熟练掌握多点触控开发技能很有必要。处理触摸的四个方法&#xff1a;-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event //首次在屏幕上检测到触摸时调用{NSLog("touchesBega…
阅读更多...
机器学习数据包之numpy

机器学习数据包之numpy

numpy 属性 import numpy as np#矩阵运算arraynp.array([[1,2,3],[2,3,4]])print (array)[[1 2 3][2 3 4]]维度 print(number of dim,array.ndim)number of dim 2形状 print(shape,array.shape)shape (2, 3)大小 print(size,array.size)size 6创建 创建类型 anp.array([…
阅读更多...
RK 利用SARADC 来做多个按键

RK 利用SARADC 来做多个按键

#DTS配置#配置DTS节点#驱动文件中匹配 DTS 节点#驱动说明#获取ADC通道#获取ADC值#计算采集到的电压#接口说明#调试方法#节点ADC值RK3399开发板上的 AD 接口有两种&#xff0c;分别为&#xff1a;温度传感器 (Temperature Sensor)、逐次逼近ADC (Successive Approximation Regis…
阅读更多...
vslabel隐藏了怎么找_vscode菜单栏与工具栏隐藏之后怎么找回来

vslabel隐藏了怎么找_vscode菜单栏与工具栏隐藏之后怎么找回来

vscode菜单栏与工具栏隐藏之后怎么找回来,命令行,菜单栏,教程,相关文章,设置为vscode菜单栏与工具栏隐藏之后怎么找回来易采站长站&#xff0c;站长之家为您整理了vscode菜单栏与工具栏隐藏之后怎么找回来的相关内容。找回菜单栏1、按alt可以显示菜单栏&#xff1b;2、可以在命…
阅读更多...
概率论之pandas

概率论之pandas

快速入门 1 import numpy as npspd.series([1,3,5,np.nan,8,4])Series spd.Series([1,3,5,np.nan,8,4])sOut[6]: 0 1.01 3.02 5.03 NaN4 8.05 4.0dtype: float64date_range datespd.date_range(20190301,periods6)datesOut[10]: DatetimeIndex([2019-03-…
阅读更多...
学习，一定是脱“贫”致富的捷径

学习，一定是脱“贫”致富的捷径

周末加班&#xff0c;加班后觉得有点无聊&#xff0c;到公司阳台坐了坐&#xff0c;想到最近的工作和生活&#xff0c;也理了理最近的状态&#xff0c;然后分享了一段话在知识星球里。如下:我平时很少静下来想东西&#xff0c;其中一个原因是因为我害怕安静&#xff0c;晚上睡觉…
阅读更多...
多模态语义分析_「CV学霸开讲」卷积神经网络压缩、多模态的语义分析研究

多模态语义分析_「CV学霸开讲」卷积神经网络压缩、多模态的语义分析研究

原标题&#xff1a;「CV学霸开讲」卷积神经网络压缩、多模态的语义分析研究【新智元导读】2017年度百度奖学金10位候选人中&#xff0c;人大的陈师哲和北大的王云鹤所学专业主要集中在计算机视觉&#xff0c;本文将详细呈现CV学子的求学经历和研究感悟&#xff0c;并独家分享他…
阅读更多...
人应该活成什么样子？该以什么方式活着？

人应该活成什么样子？该以什么方式活着？

“您幸福吗&#xff1f;”“我是外地打工的&#xff0c;不要问我。”“您幸福吗&#xff1f;”“我姓曾。”相信大家还记得这段央视走基层采访的经典问答。“幸福是什么”是一个人类社会中被广泛讨论的话题&#xff0c;人要怎么生活才能获得幸福&#xff0c;一直是众生要追寻的…
阅读更多...
DB2操作指南及命令大全word版

DB2操作指南及命令大全word版

《DB2操作指南及命令大全word版》下载地址&#xff1a; 网盘下载 转载于:https://www.cnblogs.com/long12365/p/9731432.html
阅读更多...
最新文章

Copyright @ 2022~2023