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个图表。

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