导航栏选择范围样式:
底部滚动条样式:
HTML代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!-- highcharts -->
<script src="plug-in/hcharts/jquery-1.8.3.min.js"></script>
<script src="plug-in/hcharts/highstock.js"></script>
<script src="plug-in/hcharts/modules/exporting.js"></script>
<script src="plug-in/hcharts/highcharts-zh_CN.js"></script>
<!-- My97DatePicker -->
<t:base type="DatePicker"></t:base>
<div class="serach-div">
<input id="start" class="datainput el-input__inner" placeholder="请选择开始时间" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'2018-08-21',maxDate:'2018-11-20'})"/>
<input id="end" class="datainput el-input__inner" placeholder="请选择结束时间" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'2018-08-21',maxDate:'2018-11-20'})" />
<button onclick="getQuery()" class="search-button search-button-primary">查询</button>
</div>
<div id="jsonStr1" style="min-width:400px;height:400px;position: relative"></div>
<div id="jsonStr2" style="min-width:400px;height:400px;position: relative"></div>
<div id="jsonStr3" style="min-width:400px;height:400px;position: relative"></div>
js代码,具体看注释
<script type="text/javascript">
//使用循环遍历页面元素进行多统计图一起进行日期查询关联
function getQuery(){//查询
var start = $("#start").val();//起始时间
var end = $("#end").val();//结束时间
$(".highcharts-range-input").each(function(i){
i+=1;
if(i%2==0){//结束时间
$(this).find("text").html(end);
}else{//起始时间
$(this).find("text").html(start);
}
});
$("input[name='min']").each(function(){//起始时间
$(this).val(start);
$(this).change();
$(this).blur();
});
$("input[name='max']").each(function(){//结束时间
$(this).val(end);
$(this).change();
$(this).blur();
});
}
//获取json文件大数据,生成统计图
var data="";
$.ajax({
url :"<%=basePath%>/chart/json/jsonStr.json",
datatype: "json",
async : false,
success : function(result) {
data=result;
}
});
//感觉上使用ajax请求比下面$.getJSON要快一些。个人感觉。。。没具体测试过。
// $.getJSON('<%=basePath%>/chart/json/jsonStr.json', function (data) {
// Create the jsonStr1 chart
Highcharts.stockChart('jsonStr1', {
chart: {
events: {
},
zoomType: 'x'
},
tooltip: {
split: false,
shared: true,
},
rangeSelector: {
//导航栏选择范围
buttons: [{
type: 'day',
count: 3,
text: '日'
}, {
type: 'week',
count: 1,
text: '周'
}, {
type: 'month',
count: 1,
text: '月'
}, {
type: 'month',
count: 6,
text: '半年'
}, {
type: 'year',
count: 1,
text: '一年'
}, {
type: 'all',
text: '全部'
}],
selected: 1 , //默认显示第几个范围
buttonTheme: { // 设置按钮样式
fill: '#F7F7F7',//按钮初始背景颜色
stroke: 'none',//边框颜色
'stroke-width': 0,//边框宽度
r: 8,//圆角
style: {//字体样式
color: '#039',
fontWeight: 'bold'
},
states: {//按钮效果
hover: {
},
select: {//选中效果
fill: '#039',//颜色
style: {//字体样式
color: 'white'
}
}
}
},
},
yAxis: {
title: {
text: 'jsonStr1'
}
},
title: {
text: ''
},
subtitle: {
text: 'jsonStr1'
},
scrollbar: {//底部滚动条样式
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonBorderRadius: 7,
trackBackgroundColor: 'none',
trackBorderWidth: 1,
trackBorderRadius: 8,
trackBorderColor: '#CCC'
},
series: [{
name: 'jsonStr1',
data: data.jsonStr1data,//获取json数据
pointStart: Date.UTC(2018, 07, 21),//时间从什么时候开始
pointInterval: 60 * 1000,//数据一分钟一条
tooltip: {
valueDecimals: 1,//保留几位小数点
valueSuffix: ''//单位
}
}]
});
//以下生成其他统计图代码省略,基本和上述差不多。。。。。。
// });
</script>
附json文件格式
{"jsonStr1":[1.1,2.1,32.1,24.134],"jsonStr2":[1,2,3,4,5,6,7,8,9]}
有什么不懂可以去看官网api