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

首先下载 Highcharts，导入项目。

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

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>情绪监控页</title>
  6.     <script src="../../Highcharts/code/highcharts.js" type="text/javascript"></script>
  7.     <script src="../../Highcharts/code/modules/exporting.js" type="text/javascript"></script>
  8.     <script src="../../KJAF2/js/base/jquery.js" type="text/javascript"></script>
  9.     <script src="../../KJAF2/js/base/jquery.cookie.js" type="text/javascript"></script>
  10.     <script src="../../KJAF2/js/base/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
  11.     <script src="../../KJAF2/js/base/jquery.ztree.js" type="text/javascript"></script>
  12.     <style type="text/css">
  13.         #container {
  14.             width: 800px;
  15.             height: 600px;
  16.             margin: 0 auto
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21. <div id="container"></div>
  22. <script type="text/javascript">
  23.  
  24.     var chart = null; // 定义全局变量
  25.     $(document).ready(function() {
  26.         chart = new Highcharts.Chart({
  27.             chart : {
  28.                 renderTo : 'container',
  29.                 events : {
  30.                     load : requestData
  31.                 }
  32.             },
  33.             title : {
  34.                 text : '情绪监控'
  35.             },
  36.             subtitle : {
  37.                 text : 'www.xxx.com'
  38.             },
  39.             legend : {
  40.                 layout : 'vertical',
  41.                 align : 'right',
  42.                 verticalAlign : 'middle',
  43.                 borderWidth : 0
  44.             },
  45.             xAxis : {
  46.                 title : {
  47.                     text : 'thetime'
  48.                 },
  49.                 categories : []
  50.             },
  51.             yAxis : {
  52.                 tickInterval : 0.5,
  53.                 max : 20,
  54.                 min : -20,
  55.                 title : {
  56.                     text : 'weight'
  57.                 }
  58.             },
  59.             series : [{
  60.                 name : '汽车零部件'
  61.             }, {
  62.                 name : '专用设备'
  63.             }, {
  64.                 name : '建筑装饰'
  65.             }, {
  66.                 name : '计算机设备'
  67.             }, {
  68.                 name : '传媒'
  69.             }, {
  70.                 name : '仪器仪表'
  71.             }, {
  72.                 name : '电子制造'
  73.             }, {
  74.                 name : '通信设备'
  75.             }, {
  76.                 name : '光学光电子'
  77.             }, {
  78.                 name : '化工新材料'
  79.             } ]
  80.         });
  81.     });
  82.  
  83.     function requestData() {
  84.         $.ajax({
  85.             url: '../../emotion/xxx/handle.do',
  86.             type : 'GET',
  87.             dataType : 'json',
  88.             contentType : 'application/json',
  89.             success: function(point) {
  90.  
  91.                 var tempArr0 = [0,0,0,0,0,0,0,0,0,0,0,0];
  92.                 var tempArr1 = [0,0,0,0,0,0,0,0,0,0,0,0];
  93.                 var tempArr2 = [0,0,0,0,0,0,0,0,0,0,0,0];
  94.                 var tempArr3 = [0,0,0,0,0,0,0,0,0,0,0,0];
  95.                 var tempArr4 = [0,0,0,0,0,0,0,0,0,0,0,0];
  96.                 var tempArr5 = [0,0,0,0,0,0,0,0,0,0,0,0];
  97.                 var tempArr6 = [0,0,0,0,0,0,0,0,0,0,0,0];
  98.                 var tempArr7 = [0,0,0,0,0,0,0,0,0,0,0,0];
  99.                 var tempArr8 = [0,0,0,0,0,0,0,0,0,0,0,0];
  100.                 var tempArr9 = [0,0,0,0,0,0,0,0,0,0,0,0];
  101.  
  102.                 var times = [];
  103.                var timeMap = point[point.length-1].timeMap;
  104.                 $.each(timeMap,function(m,obj){
  105.                     times.push(obj);
  106.                 });
  107.  
  108.                 $.each(point,function(m,obj){
  109.                     if(obj.type == 0){
  110.                         tempArr0[obj.time]=obj.weight;
  111.                     }else if(obj.type == 1){
  112.                         tempArr1[obj.time]=obj.weight;
  113.                     }else if(obj.type == 2){
  114.                         tempArr2[obj.time]=obj.weight;
  115.                     }else if(obj.type == 3){
  116.                         tempArr3[obj.time]=obj.weight;
  117.                     }else if(obj.type == 4){
  118.                         tempArr4[obj.time]=obj.weight;
  119.                     }else if(obj.type == 5){
  120.                         tempArr5[obj.time]=obj.weight;
  121.                     }else if(obj.type == 6){
  122.                         tempArr6[obj.time]=obj.weight;
  123.                     }else if(obj.type == 7){
  124.                         tempArr7[obj.time]=obj.weight;
  125.                     }else if(obj.type == 8){
  126.                         tempArr8[obj.time]=obj.weight;
  127.                     }else if(obj.type == 9){
  128.                         tempArr9[obj.time]=obj.weight;
  129.                     }
  130.  
  131.                 });
  132.  
  133.                 chart.series[0].setData(tempArr0);
  134.                 chart.series[1].setData(tempArr1);
  135.                 chart.series[2].setData(tempArr2);
  136.                 chart.series[3].setData(tempArr3);
  137.                 chart.series[4].setData(tempArr4);
  138.                 chart.series[5].setData(tempArr5);
  139.                 chart.series[6].setData(tempArr6);
  140.                 chart.series[7].setData(tempArr7);
  141.                 chart.series[8].setData(tempArr8);
  142.                 chart.series[9].setData(tempArr9);
  143.  
  144.                 times = times.reverse();
  145.                 chart.xAxis[0].setCategories(times);
  146.  
  147.                 // 一秒后继续调用本函数
  148.                 setTimeout(requestData, 600000);
  149.             },
  150.             cache: false
  151.         });
  152.     }
  153.  
  154. </script>
  155.  
  156. </body>
  157. </html>

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

  1. package com.szkingdom.lakala.system.handler;
  2.  
  3. import com.alibaba.fastjson.JSON;
  4. import com.szkingdom.lakala.common.util.SpringContextUtil;
  5. import org.slf4j.Logger;
  6. import org.slf4j.LoggerFactory;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.context.ApplicationContext;
  9. import org.springframework.context.annotation.Scope;
  10. import org.springframework.context.support.ClassPathXmlApplicationContext;
  11. import org.springframework.jdbc.core.JdbcTemplate;
  12. import org.springframework.stereotype.Controller;
  13. import org.springframework.web.bind.annotation.RequestMapping;
  14. import org.springframework.web.bind.annotation.ResponseBody;
  15.  
  16. import javax.servlet.http.HttpServletRequest;
  17. import javax.servlet.http.HttpServletResponse;
  18. import java.io.IOException;
  19. import java.util.ArrayList;
  20. import java.util.HashMap;
  21. import java.util.List;
  22. import java.util.Map;
  23.  
  24. /**
  25.  * EmotionHandler
  26.  * 情绪监控处理类
  27.  * xums
  28.  * 2017-08-14-下午4:38
  29.  */
  30.  
  31. @Controller
  32. @Scope("prototype")
  33. @RequestMapping("/emotion")
  34. public class EmotionHandler {
  35.  
  36.     private Logger log = LoggerFactory.getLogger(getClass());
  37.  
  38.     @Autowired
  39.     public JdbcTemplate emotionJdbcTemplate;
  40.  
  41.     @RequestMapping(value = "/xxx/handle.do", produces = "application/json;charset=UTF-8")
  42.     @ResponseBody
  43.     public String handle(HttpServletRequest request, HttpServletResponse response) {
  44.  
  45.         log.info("【情绪监控控制类】...EmotionHandler...handle...");
  46.         List<Map<String, Object>> finalList = new ArrayList<Map<String, Object>>();
  47.         try {
  48.             List<String> timeList = emotionJdbcTemplate.queryForList("select distinct thetime from table order by thetime desc limit 12", String.class);
  49.  
  50.             Map<String, Object> timeMap = new HashMap<String, Object>();
  51.             timeMap.put("timeMap", timeList);
  52.  
  53.             Map<String, String> timeSortMap = new HashMap<String, String>();
  54.             int n = timeList.size();
  55.             StringBuilder builder = new StringBuilder();
  56.             for (String time : timeList) {
  57.                 builder.append("'").append(time).append("'").append(",");
  58.                 timeSortMap.put(time,String.valueOf(--n));
  59.             }
  60.             String time = builder.toString();
  61.             time = time.substring(0,time.lastIndexOf(","));
  62.  
  63.             List<Map<String, Object>> list = emotionJdbcTemplate.queryForList("select * from table where thetime in ("+time+") group by category,thetime desc");
  64.  
  65.             for (Map<String, Object> map : list) {
  66.                 String category = (String) map.get("category");
  67.                 String theTime = (String) map.get("thetime");
  68.                 if ("汽车零部件".equals(category)) {
  69.                     map.put("type", "0");
  70.                 } else if ("专用设备".equals(category)) {
  71.                     map.put("type", "1");
  72.                 } else if ("建筑装饰".equals(category)) {
  73.                     map.put("type", "2");
  74.                 } else if ("计算机设备".equals(category)) {
  75.                     map.put("type", "3");
  76.                 } else if ("传媒".equals(category)) {
  77.                     map.put("type", "4");
  78.                 } else if ("仪器仪表".equals(category)) {
  79.                     map.put("type", "5");
  80.                 } else if ("电子制造".equals(category)) {
  81.                     map.put("type", "6");
  82.                 } else if ("通信设备".equals(category)) {
  83.                     map.put("type", "7");
  84.                 } else if ("光学光电子".equals(category)) {
  85.                     map.put("type", "8");
  86.                 } else if ("化工新材料".equals(category)) {
  87.                     map.put("type", "9");
  88.                 } else {
  89.                     continue;
  90.                 }
  91.  
  92.                 map.put("time", timeSortMap.get(theTime));
  93.  
  94.                 finalList.add(map);
  95.             }
  96.  
  97.             finalList.add(timeMap);
  98.         } catch (Exception e) {
  99.             log.error("【情绪监控控制类】...EmotionHandler...handle...异常..." + e.getMessage());
  100.         }
  101.  
  102.         String jsonStr = getSuccResult(finalList);
  103.         System.out.println(jsonStr);
  104.         return jsonStr;
  105.  
  106.     }
  107.  
  108.     protected String getSuccResult(Object o) {
  109.         String ss = JSON.toJSONString(o);
  110.         return ss;
  111.     }
  112.  
  113. }

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

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <beans xmlns="http://www.springframework.org/schema/beans"
  3.        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.        xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
  5.  
  6.     <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource" destroy-method="close">
  7.         <!-- Connection Info -->
  8.         <property name="driverClass" value="${masterEmotion.jdbc.driver}"></property>
  9.         <property name="jdbcUrl" value="${masterEmotion.jdbc.url}"></property>
  10.         <property name="user" value="${masterEmotion.jdbc.username}"></property>
  11.         <property name="password" value="${masterEmotion.jdbc.password}"></property>
  12.         <property name="maxPoolSize" value="20"></property>
  13.         <property name="minPoolSize" value="3"></property>
  14.         <property name="maxIdleTime" value="1800" />
  15.         <property name="initialPoolSize" value="3"></property>
  16.         <property name="autoCommitOnClose" value="false" />
  17.     </bean>
  18.  
  19.     <bean id="emotionJdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
  20.         <property name="dataSource" ref="dataSources"/>
  21.     </bean>
  22.  
  23. </beans>

最终结果

感谢大家观看！

聊聊、Highcharts 动态数据的更多相关文章

  1. 聊聊、Highcharts 动态数据优化版

    好久没来博客园了,最近项目太紧.上一篇写了 <Highcharts 之[动态数据]>,不够完善,虽然横纵轴可以动态取数据,但是行业信息是固定的,不能随着大数据热点改变.废话不说,直接上代码 ...

  2. Highcharts动态添加点数据

    Highcharts用来作为图表数据的展示十分方便,效果也比较好.highcharts不仅可以实现死数据的展示,也能实现动态数据的实时添加显示,类似财经股票的实时刷新效果,实现过程并不难,大致如下. ...

  3. 将Highcharts图表数据生成Table表格

    有的时候,我们不仅仅需要漂亮的统计图来显示统计结果,还需要在统计图下方一个表格可以更加直观的展现各类数据.既然统计图都显示出来了,那我们可以根据统计图的各元素生成表格了. 首先,先显示统计图. Htm ...

  4. Highcharts 动态图

    Highcharts 动态图 每秒更新曲线图 chart.events chart.event 属性中添加 load 方法(图表加载事件).在 1000 毫秒内随机产生数据点并生成图表. chart: ...

  5. 【Paddy】如何将物理表分割成动态数据表与静态数据表

    前言 一般来说,物理表的增.删.改.查都受到数据量的制约,进而影响了性能. 很多情况下,你所负责的业务关键表中,每日变动的数据库与不变动的数据量比较,相差非常大. 这里我们将变动的数据称为动态数据,不 ...

  6. C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计

    在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...

  7. 浅谈如何使用python抓取网页中的动态数据

    我们经常会发现网页中的许多数据并不是写死在HTML中的,而是通过js动态载入的.所以也就引出了什么是动态数据的概念, 动态数据在这里指的是网页中由Javascript动态生成的页面内容,是在页面加载到 ...

  8. 使用DocX开源组件，实现动态数据的填充。

    1.先解释一下,什么叫做动态数据,动态数据指的是,一条数据的格式固定,但数据的条数不固定. 2.应用环境,在一个表格当中如果,现在表格有三行n列,如果你需要在表格第一行后添加同等规格的一行或n行,应该 ...

  9. 用JSON-server模拟REST API(二) 动态数据

    用JSON-server模拟REST API(二) 动态数据 上一篇演示了如何安装并运行 json server , 在这里将使用第三方库让模拟的数据更加丰满和实用. 目录: 使用动态数据 为什么选择 ...

随机推荐

  1. (转载)资源字典（Pro WPF 学习)

    原地址:http://www.cnblogs.com/yxhq/archive/2012/07/09/2582508.html 1.创建资源字典 下面是一个资源字典(AppBrushes.xaml), ...

  2. jsp另外五大内置对象之response-操作cookie

    responseo3.jsp <%@ page language="java" contentType="text/html; charset=utf-8" ...

  3. TC和脚本语言

    TC:Turbo C 集成开发环境是由Borland 公司开发的一套C 语言开发工具,它集成了程序编辑.调试.链接等多种功能.在DOS 系统时代,Turbo C 是被最广泛使用的一种PC 机应用程序开 ...

  4. BZOJ 4881: [Lydsy2017年5月月赛]线段游戏

    4881: [Lydsy2017年5月月赛]线段游戏 Time Limit: 3 Sec  Memory Limit: 256 MBSubmit: 164  Solved: 81[Submit][St ...

  5. 11gR2 新特性： Rebootless Restart

    众所周知,当集群出现问题时,例如某个节点丢失网络心跳,或者不能够访问表决盘,或者节点出现了严重的性能问题等,CRS会选择将某个节点的OS 重启,以便保证集群的一致性.当然,大部分的重启都是由CRS的核 ...

  6. [手势识别] CNN + OpenCV 手势识别记录

    这几天没事,想着再学点一些视觉识别方向的东西,因为之前做了验证码识别,有了机器学习的信心,因此这次打算做个手势识别,参考了很多网上的图像处理方式,中间也遇到了很多问题,最终算是做出来了吧. 1.训练集 ...

  7. 2018.3.27 Mac 配置Tomcat

    先在官网上下载Tomcat .也可以用这个传送门. https://tomcat.apache.org/download-70.cgi 选择zip文件夹的下载就ok 下载完成之后将该文件夹.(如果是t ...

  8. falling object思路总结

    1.用检测的方法把falling object标记为一个类别,然后检测出类别.这种方式不可行的原因:因为falling object可能是任何东西,所以可能是一个路锥,也可能是一个玻璃瓶,还可能是掉下 ...

  9. StatementHandler-Mybatis源码系列

    内容更新github地址:我飞 StatementHandler接口 StatementHandler封装了Mybatis连接数据库操作最基础的部分.因为,无论怎么封装,最终我们都是要使用JDBC和数 ...

  10. laydate时间控件绑定回调事件

    onclick="laydate({istime: true, format: 'YYYY-MM-DD',choose:checkDate});" //回调函数内容 functio ...