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

资源：点击打开链接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,
	    	            }]
	    	        });
	    		}
	        });
		
	}