首页 > 代码库 > highstock使用案例（异步请求，懒加载）
highstock使用案例（异步请求，懒加载）
jsp中导入：<script src="http://www.mamicode.com/ jsp页面加入 后台穿过类的数据封装 前台js代码： 原文：http://blog.csdn.net/u010815305/article/details/45062467 参考： http://www.tuicool.com/articles/MNBVniE http://blog.csdn.net/ace_luffy/article/details/8233307 highstock使用案例（异步请求，懒加载）<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 = "http://www.mamicode.com/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();
}
}
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,
}]
});
}
});
}