首页 技术 正文
技术 2022年11月23日
0 收藏 382 点赞 3,642 浏览 5149 个字

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

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/140772.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:875 阅读:5,067
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,504
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,312
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:730 阅读:4,307
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:4,904
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,097
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站