jsp中导入：<script src="<c:url value="/resources/js/highstock.js"></c:url>"></script>
jsp页面加入
<div id="historyChart" style="min-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-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