导航栏选择范围样式：

底部滚动条样式：

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

https://api.hcharts.cn/highstock