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

Posted 2020-08-19

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