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 = L;

    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 = ; i < ; i++) {
            String[] item = new String[];
            for (int j = ; j < item.length; j++) {
                item[j] = Math.random() *  + "";
            }
            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 = ; i < ; i++) {
            Map<String,Object> obj = new HashMap<String,Object>();
            String[] item = new String[];
            for (int j = ; j < item.length; j++) {
                item[j] = Math.random() *  + "";
            }
            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 ==) {
            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: px;
        margin: 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個圖表。

源代碼項目下載下傳:源代碼項目點此下載下傳