HighChart扩展-动态获取数据

HighChart扩展实践-动态获取数据封装jQuery工具类

这篇文章没有介绍highChart的基础篇,主要实现了封装工具类,动态从后台加载数据。

后台Servlet代码:

package com.kenneth.test.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
@SuppressWarnings("unused")
public class LoadDataServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public void doGet(HttpServletRequest request, HttpServletResponse response)

    throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");// 这条语句指明了向客户端发送的内容格式和采用的字符编码．

        PrintWriter out = response.getWriter();

        // 获取模拟数据list
        // List<String[]> list = getModelList();

        // 获取模拟数据Map
//      Map<String, List<String[]>> map = new HashMap<String, List<String[]>>();

        Gson gson = new Gson();
        String json = gson.toJson(getModelMap());
        out.write(json);

        out.close();

    }

    // 用于处理客户端发送的POST请求

    public void doPost(HttpServletRequest request, HttpServletResponse response)

    throws ServletException, IOException {

        doGet(request, response);

    }

    private List<String[]> getModelList() {
        List<String[]> list = new ArrayList<String[]>();

        for (int i = 0; i < 5; i++) {
            String[] item = new String[6];
            for (int j = 0; j < item.length; j++) {
                item[j] = Math.random() * 100 + "";
            }
            list.add(item);
        }
        return list;
    }

    private Map<String, Map<String,Object>> getModelMap() {
        Map<String, Map<String,Object>> map = new HashMap<String, Map<String,Object>>();
        for (int i = 0; i < 5; i++) {
            Map<String,Object> obj = new HashMap<String,Object>();
            String[] item = new String[6];
            for (int j = 0; j < item.length; j++) {
                item[j] = Math.random() * 100 + "";
            }
            obj.put("data", item);
            obj.put("name", "类别"+i);
            map.put(i+"", obj);
        }
        return map;
    }
}

封装highChart工具类对象:

var ChartUtil = {
    /**
     * 创建图表
     * 
     * @param options
     * @returns
     */
    createChart : function(options) {
        if (options && options != {}) {
            var defaultOptions =  ChartUtil.initOptions();
            // 如果有配置参数 , 则 把配置参数添加到默认参数中
            options = $.extend(defaultOptions, options);
        }
        return ChartUtil.loadData(options);
    },
    /**
     * 加载默认配置
     */
    initOptions : function() {
        return {
            loadDataConfig : {
                url : "",
                params : {}
            },
            callback : ChartUtil.callback
        };
    },
    /**
     * 加载动态数据
     * 
     * @param options
     */
    loadData : function(options) {
        var config = options.loadDataConfig;
        var callback = options.callback;
        if (config && config.url != "" && $.type(config.params) == "object") {
            $.post(config.url, config.params, function(data) {
                var dataArr = JSON.parse(data);
                if ($.type(callback) == "function")
                    callback(options, dataArr);
            });
        }
        if ($.type(callback) == "function")
            callback(options);
    },
    /**
     * 默认的回调函数 加载动态数据执行完成之后执行
     * 
     * @param options
     * @param dataResult
     */
    callback : function(options, dataResult) {
        // 当有结果集时
        if (dataResult) {
            options.series = ChartUtil.parseObjToSeries(dataResult);
        }
        options.chart = options.chart || {};
        options.chart['renderTo'] = options.selectorId;
        return new Highcharts.Chart(options);
    },
    /**
     * 将整个对象转换成序列对象
     */
    parseObjToSeries : function(objs) {
        var series = [];
        $.each(objs, function(index, item) {
            var obj = [];
            // list
            if ($.type(item) == "array") {
                obj = ChartUtil.getItemObj(item);
            }
            // key-value 格式
            if ($.type(item) == "object") {
                obj = ChartUtil.getItemObj(item.data);
            }
            item.data = obj;
            series.push(item);
        });
        return series;
    },
    /**
     * 获取序列中的单行对象
     */
    getItemObj : function(data) {
        var obj = [];
        $.each(data, function(objIndex, objItem) {
            obj.push(parseFloat(objItem));
        });
        return obj;
    }
};

封装jQuery插件用于调用:

(function($) {
    var ChartUtil = ChartUtil || "";
    $.fn.createDynChart = function(options) {
        options = options || {};
        // 选择器没有找到对象
        if ($(this).length == 0) {
            return false;
        }
        // 遍历选择器获取到的界面对象,在每个内部生成一个图表
        $.each($(this), function(index, item) { if (!$(item).attr("id")) { $(item).attr("id", "$default_chart_" + index); } options['selectorId'] = $(item).attr("id"); if ($.type(ChartUtil) != "object") { alert("请先引入图表生成工具再使用该插件!"); return; } ChartUtil.createChart(options); });
    }
})(jQuery);

前台界面代码:

<style>
    .my-charts{
        width: 800px;
        margin:0 auto;
    }
  </style>
<script type="text/javascript">
        $(function(){
            var options = {
                title : {
                    text : "测试报表"
                },
                xAxis : {
                    categories : [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' ]
                },
                chart : {
                    type : "column"
                },
                loadDataConfig : {
                    "url" : $("base").attr("href") + "test/loadData",
                    "params" : {}
                }
            };
            $(".my-charts").createDynChart(options);
        });
    </script>
    <div class="my-charts"></div>
    <div class="my-charts"></div>

这样,就完成了把任意元素转换成highChart图表的功能。也可以把封装的highChart工具类分离出来单独使用。

生成的效果图:

由于界面我用的class样式获取的元素有2个,所以会生成2个图表。

源代码项目下载:源代码项目点此下载