聊聊、Highcharts 动态数据
生活随笔
收集整理的這篇文章主要介紹了
聊聊、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
總結
以上是生活随笔為你收集整理的聊聊、Highcharts 动态数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android 四大开发组件
- 下一篇： 恒生O32系统的前世今生