highstock使用案例（异步请求，懒加载）

jsp中导入：<script src="<c:url value="/resources/js/highstock.js"></c:url>"></script>

jsp页面加入

<div id="historyChart" style="min-width:1050px;height:350px"></div> 

<div class="tab-pane fade" id="tab-friends">
                             <div class="row">
                                 <div class="radio" id="radio">
                                 <div class="col-md-2">
                                        <input type="radio" name="dimension" id="total"
                                                   value="total" checked="checked"> <label
                                                    for="total">总计</label>
                                 </div>
                                 <c:forEach var="item" items="${dimensionValues}">
                                     <div class="col-md-2">
                                             <input type="radio" name="dimension" id="${item}"
                                                    value="${item}" > <label
                                                    for="${item}"> ${item}</label>
                                     </div>
                                 </c:forEach>
                              </div>  

                           </div>  

                           <div class="alert alert-info fade in" id ="warningInfo" style="display: none;">
                                    <button type="button" class="close" id = "warnningButton" data-dismiss=""
                                        aria-hidden="">×</button>
                                    <i class="fa fa-info-circle fa-fw fa-lg"></i> <strong></strong> 您查找的无记录！
                            </div>
                            <br><br>
                           <div id="historyChart" style="min-width:1050px;height:350px"></div>
                        </div>  

后台穿过类的数据封装

@RequestMapping(value = "/comm/gethistorydata", method = RequestMethod.POST)
    public @ResponseBody JSONArray getHistoryData(String dimension,String metric,String start,
            String end,String businessType,String dimensionValue) {
        LeftNavParemeter navParameter = new LeftNavParemeter();  

        Calendar calendar = Calendar.getInstance();
        if (start == null && end == null) {
            end = DateUtils.format(new Date(), DateUtils.DATE_YYYY_MM_DD);// 测试数据2015-03-20
            Date date = DateUtils.parse(end, DateUtils.DATE_YYYY_MM_DD);
            calendar.setTime(date);
            calendar.set(Calendar.YEAR, calendar.get(Calendar.YEAR) - 1);
            Date preDate = calendar.getTime();
            start = DateUtils.format(preDate);
        }
        navParameter.setStartDate(start);
        navParameter.setEndDate(end);
        navParameter.setDimensionName(dimension);
        navParameter.setMetric(metric);
        navParameter.setBusinessType(businessType);  

        if (!start.contains("-")) {  <span style="white-space:pre">            </span>//根据时间的选择进行懒加载数据
            JSONArray json = getMinuteHistory(navParameter, dimensionValue);
            return json;
        }  

        SimpleDateFormat spf = new SimpleDateFormat("yyyy-MM-dd");
        Map<Date,Integer> valueMap = new LinkedHashMap<Date, Integer>();
        try {
            List<LoginCommDimension> loginCommDimensionList = loginService
                    .findCommByDimensionValue(navParameter);
            JSONArray dimensionValues = JSON.parseArray(currentnav
                    .getDimension().getDimensionValues());  

            JSONArray jsonarr = new JSONArray();  

            for (int i = 0; i < loginCommDimensionList.size(); i++) {
                LoginCommDimension item = loginCommDimensionList.get(i);
                JSONObject parseObject = JSONObject.parseObject(item
                        .getDimensionValue());
                Date date = spf.parse(item.getDate());
                if (dimensionValue.equals("total")) {  

                    if(valueMap.get(date)==null){
                        valueMap.put(date,item.getTotal());
                    }else{
                        valueMap.put(date, valueMap.get(date)+item.getTotal());
                    }  

                    continue;
                }
                for (Object value : dimensionValues) {
                    if (value.toString().equals(dimensionValue)) {
                        if (parseObject.containsKey(value)) {  

                            if(valueMap.get(date)==null){
                                valueMap.put(date,(Integer)parseObject.get(value));
                            }else{
                                valueMap.put(date, valueMap.get(date)+(Integer)parseObject.get(value));
                            }
                        }
                    }
                }  

            }
            for(Entry<Date, Integer> entry : valueMap.entrySet()){
                Object[] obj = new Object[2];
                obj[0] = entry.getKey();
                obj[1] = entry.getValue();
                jsonarr.add(obj);
            }
            return jsonarr;//返回jsonarray类型
        } catch (ParseException e) {
            throw new RuntimeException();
        }  

    }  

前台js代码：

function afterSetExtremes(e) {//懒加载，当数据量比较大的时候使用。
        navParameters.metric = getCheckedMetric();
        var parameter = JSON.stringify(navParameters);
        var chart = $(‘#historyChart‘).highcharts();
        chart.showLoading(‘Loading data from server...‘);
        $.ajax({
            url : ‘comm/gethistorydata‘,
            type : ‘post‘,
            data : {‘start‘: Math.round(e.min),‘end‘:Math.round(e.max),
                ‘dimensionValue‘:dimensionValue,‘businessType‘:navParameters.businessType,
                ‘dimension‘:navParameters.dimensionName,‘metric‘:navParameters.metric},
            dataType : ‘json‘,
            success : function(data) {
                 chart.series[0].setData(data);
                 chart.hideLoading();
            }
        });
    }

    function  getHistory(){
        navParameters.metric = getCheckedMetric();

         $.ajax({
                url : ‘comm/gethistorydata‘,
                type : ‘post‘,
                data : {
                    ‘dimensionValue‘:dimensionValue,‘businessType‘:navParameters.businessType,
                    ‘dimension‘:navParameters.dimensionName,‘metric‘:navParameters.metric},
                dataType : ‘json‘,
                success : function(data) {
                    if(!isBlank(data)){
                        $("#warningInfo").hide();
                    }else{
                        $("#warningInfo").show();
                        $("#historyChart").html("");
                        return;
                    }
                    var currentDate = new Date();

                    data = [].concat(data, [[Date.UTC(currentDate.getFullYear(),
                                            currentDate.getMonth(),
                                            currentDate.getDate(), 16, 00),
                                             0]]);
                    $(‘#historyChart‘).highcharts(‘StockChart‘, {
                        chart : {
                            type: ‘spline‘,
                            zoomType:‘x‘,
                            borderColor : ‘#EBBA95‘,
                            borderWidth : 1
                        },

                        navigator : {
                            adaptToUpdatedData: false,
                            series : {
                                data : data
                            },
                            xAxis : {
                                dateTimeLabelFormats:{
                                    second: ‘%H:%M:%S‘,
                                    minute: ‘%H:%M‘,
                                    hour: ‘%H:%M‘,
                                    day: ‘%m-%d‘, //‘%Y<br/>%m-%d‘
                                    week: ‘%m-%d‘,
                                    month: ‘%m‘,
                                    year: ‘%Y‘
                                }
                            }
                        },

                        scrollbar: {
                            liveRedraw: true
                        },

                        rangeSelector : {
                            buttons: [{
                                type: ‘hour‘,
                                count: 1,
                                text: ‘1小时‘
                            },{
                                type: ‘day‘,
                                count: 1,
                                text: ‘1天‘
                            }, {
                                type: ‘all‘,
                                text: ‘全部‘
                            }],
                            inputEnabled: false, // it supports only days
                            selected : 2 // all
                        },
                        credits:{enabled:false},
                        xAxis : {
                            events : {
                                afterSetExtremes : afterSetExtremes
                            },
                            dateTimeLabelFormats:{
                                second: ‘%H:%M:%S‘,
                                minute: ‘%H:%M‘,
                                hour: ‘%H:%M‘,
                                day: ‘%m-%d‘, //‘%Y<br/>%m-%d‘
                                week: ‘%m-%d‘,
                                month: ‘%m‘,
                                year: ‘%Y‘
                            }

                        },

                        yAxis: {
                            floor: 0
                        },
                        tooltip: {
                            pointFormat: ‘<span style="color:{series.color}">‘+dimensionValue+‘</span>: <b>{point.y}</b><br/>‘,
                        }, 

                        series : [{
                            data : data,
                        }]
                    });
                }
            });

    }

原文：http://blog.csdn.net/u010815305/article/details/45062467

参考：

http://www.tuicool.com/articles/MNBVniE

http://blog.csdn.net/ace_luffy/article/details/8233307