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

highstock使用案例(异步请求,懒加载)的更多相关文章

  1. js实现所有异步请求全部加载完毕后,loading效果消失

    在实际开发中,一定有情况是这样的,一个页面我们有多个地方请求了ajax,在这种情况下,我们要实现数据没来之前出现我们炫酷的loading效果,而且要等到所有的ajax都请求完毕后,才让我们的loadi ...

  2. VUE项目性能优化实践——通过懒加载提升页面响应速度

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...

  3. vue中页面卡顿,使用懒加载

    为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 常用的懒加载方式有两种:即使用vue异步组件 和 ES中的imp ...

  4. 抛砖引玉:探讨网站性能优化之Javascript异步懒加载技术

    懒加载技术是现在许多大型网站的都使用的提高网站性能的方式,它的核心思想是当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 其实国内很多网站都用 ...

  5. Vue 组件异步加载(懒加载)

    一.vue的编译模式 (1)路由配置信息 //eg1: const MSite = resolve => require.ensure([], () =>resolve(require([ ...

  6. 05showLoading配置和 <text>标签的坑 如何发送请求 分享功能和懒加载

    14-电影-列表-需求分析 小程序里面取数据 没有冒号这么一说 加载动画 在对应页面 js文件中 showLoading你可以去看他的配置     // wx.showLoading() 应用在让用户 ...

  7. vue路由的异步加载(懒加载)方法

    vue路由的异步加载(懒加载)方法. javascriptvue.jsvue-router  阅读约 2 分钟 vue本身不多介绍.直接说问题,因为vue的所有路由都是加载在一个app.js里的,如果 ...

  8. vue swiper异步加载轮播图,并且懒加载

    参考:https://blog.csdn.net/weixin_38304202/article/details/78282826 效果: 此处安装省略 vue: <div class=&quo ...

  9. 图片懒加载、ajax异步调用数据、lazyload插件的使用

    关于这个效果还是很简单的,样式部分我就不多说了,我就简单的写了一下布局, 这是css样式 我们先说一下实现的原理. 我们都知道在于图片的引入,我们都是用src来引入图片地址.从而实现图片的显示.那我们 ...

随机推荐

  1. Quartz调用大全

    Quartz调用大全 1.Quartz应用范围广泛,可单独执行也可在spring中嵌入执行. 类似的定时任务在linux下可以用crontab执行 2.实现代码: QuartzTest :主要执行类 ...

  2. 【IUML】支持向量机SVM[续]

    支持向量机基本上是最好的有监督学习算法了.看很多正统的讲法都是从VC 维理论和结构风险最小原理出发,然后引出SVM什么的,还有些资料上来就讲分类超平面什么的.我们logistic回归出发,引出了SVM ...

  3. 如何通过js关闭微信浏览器页面

    WeixinJSBridge.call('closeWindow'); jssdk wx.closeWindow(); WeixinJSBridge对象还提供了哪些功能: WeixinJSBridge ...

  4. BNU Concentric Rings

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=16030 Concentric Rings   There are several different ...

  5. MybatisGen1.0 Mybatis JavaBean Mapper生成工具

    MybatisGen 一:主要技术 1:apache commons dbutils 2:freemarker模板引擎 3:java(1.5+) 二:使用说明 1:配置文件是src/config.pr ...

  6. WebRequest多线程 超时问题

    using System; using System.Collections; using System.Collections.Generic; using System.Net; using Sy ...

  7. 查看sedna创建的数据库和集合,文档之类

    在sedna的安装文件夹下.看一下cfg文件夹: <pre name="code" class="plain">[xuzhina@localhost ...

  8. SpringBoot四大神器之Starter

    SpringBoot的starter主要用来简化依赖用的.本文主要分两部分,一部分是列出一些starter的依赖,另一部分是教你自己写一个starter. 部分starters的依赖 Starter( ...

  9. [Javascript]1. Improve you speed! Loop optimaztion

    /** Improve you loop code */ var treasureChest = { goldCoins: 10000, magicalItem : "Crown of Sp ...

  10. docker入门——构建镜像

    前面我们已经介绍了如何拉取已经构建好的带有定制内容的Docker镜像,那么如何构建自己的镜像呢? 构建Docker镜像有以下两种方法: 使用docker commit命令. 使用docker buil ...