聊聊、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()); @Autowired
public JdbcTemplate emotionJdbcTemplate; @RequestMapping(value = "/xxx/handle.do", produces = "application/json;charset=UTF-8")
@ResponseBody
public 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>
最终结果
感谢大家观看！
聊聊、Highcharts 动态数据的更多相关文章
- 聊聊、Highcharts 动态数据优化版
好久没来博客园了,最近项目太紧.上一篇写了 <Highcharts 之[动态数据]>,不够完善,虽然横纵轴可以动态取数据,但是行业信息是固定的,不能随着大数据热点改变.废话不说,直接上代码 ...
- Highcharts动态添加点数据
Highcharts用来作为图表数据的展示十分方便,效果也比较好.highcharts不仅可以实现死数据的展示,也能实现动态数据的实时添加显示,类似财经股票的实时刷新效果,实现过程并不难,大致如下. ...
- 将Highcharts图表数据生成Table表格
有的时候,我们不仅仅需要漂亮的统计图来显示统计结果,还需要在统计图下方一个表格可以更加直观的展现各类数据.既然统计图都显示出来了,那我们可以根据统计图的各元素生成表格了. 首先,先显示统计图. Htm ...
- Highcharts 动态图
Highcharts 动态图 每秒更新曲线图 chart.events chart.event 属性中添加 load 方法(图表加载事件).在 1000 毫秒内随机产生数据点并生成图表. chart: ...
- 【Paddy】如何将物理表分割成动态数据表与静态数据表
前言 一般来说,物理表的增.删.改.查都受到数据量的制约,进而影响了性能. 很多情况下,你所负责的业务关键表中,每日变动的数据库与不变动的数据量比较,相差非常大. 这里我们将变动的数据称为动态数据,不 ...
- C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计
在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...
- 浅谈如何使用python抓取网页中的动态数据
我们经常会发现网页中的许多数据并不是写死在HTML中的,而是通过js动态载入的.所以也就引出了什么是动态数据的概念, 动态数据在这里指的是网页中由Javascript动态生成的页面内容,是在页面加载到 ...
- 使用DocX开源组件，实现动态数据的填充。
1.先解释一下,什么叫做动态数据,动态数据指的是,一条数据的格式固定,但数据的条数不固定. 2.应用环境,在一个表格当中如果,现在表格有三行n列,如果你需要在表格第一行后添加同等规格的一行或n行,应该 ...
- 用JSON-server模拟REST API(二) 动态数据
用JSON-server模拟REST API(二) 动态数据 上一篇演示了如何安装并运行 json server , 在这里将使用第三方库让模拟的数据更加丰满和实用. 目录: 使用动态数据 为什么选择 ...
随机推荐
- python之删除指定目录指定日期下的日志文件
#=======================================================================================20190521以下脚本 ...
- ABAP的Package interface, 安卓的manifest.xml和Kubernetes的Capabilities
ABAP 事务码SE21创建ABAP包接口.这是ABAP基于包层面的访问控制实现逻辑.包里可以存储很多ABAP对象.如果开发人员想将某些对象声明为包外程序也能访问,可以将这些对象放在包接口的Visib ...
- python基础一 day14 生成器函数进阶（1）
- tmpfs与内存盘
如何快速的吃掉一段内存:通过tmpfs来划一片领地,再用dd去粗暴占用mount -t tmpfs -o size=512M tmpfs /mnt/demodd if=/dev/zero of=/mn ...
- 简单的cocos2dx笔试题
1.参数传递有几种方式?值传递.指针传递.引用传递 2.指针和引用有什么分别:如果传引用比传指针安全,为什么?如果我使用常量指针难道不行吗? 1.指针是一个变量,存储一个地址,指向内存的一个存储单元: ...
- iOS跳转到各种系统设置界面
定位服务 定位服务有很多APP都有,如果用户关闭了定位,那么,我们在APP里面可以提示用户打开定位服务.点击到设置界面设置,直接跳到定位服务设置界面.代码如下: //定位服务设置界面 NSURL *u ...
- 约束Constraints
1.setNeedsUpdateConstraints:当想要调整子视图布局时,在主线程调用该方法标记constraint需要在未来的某个点更新(该方法不会立刻强制刷新constraint,而是等待下 ...
- 学习笔记(四）： Representation:Feature Engineering/Qualities of Good Features/Cleaning Data/Feature Sets
目录 Representation Feature Engineering Mapping Raw Data to Features Mapping numeric values Mapping ca ...
- UNIX 是啥?!和Linux什么关系？
操作系统有两大阵营,一边是基于微软 Windows NT 的操作系统,一边是由UNIX衍生下来的操作系统. Linux, Mac OS X, Android, iOS, Chrome OS甚至路由器上 ...
- Unity基础-脚本的加载与编译顺序
脚本的加载与编译顺序 C#是以Assembly(汇编集)为一个基本单元组织代码的,dll就是一个assembly,dll之间有加载以来顺序 Assets/*.dll Stamdard Assets/* ...