Highcharts 之 动态数据

Posted 香农随笔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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");
                } 数据可视化之Highcharts

我如何在Highcharts图表上使用动态数据?

highcharts 未定义series增加series

Highcharts 动态制作3D柱状图

highcharts 怎样动态为series的name,data赋值

怎么使用Ajax动态给Highcharts的series属性赋值