废话不多说,上代码
1.首先引入相应的插件
<script src="https://img.hcharts.cn/highstock/highstock.js" type="text/javascript"></script>
<!-- 让highcharts点击范围更顺滑 -->
<script src="https://img.hcharts.cn/highcharts/modules/boost.js" type="text/javascript"></script>
<script src="${ct}/js/highchart/no-data-to-display.js"></script>
<script src="${ct}/js/highchart/exporting.js" type="text/javascript"></script>
<script src="${ct}/js/highchart/highcharts-zh_CN.js" type="text/javascript"></script>
2.html
<section id="container" style="width:90%;height:46%;margin: 10px auto;"></section>
3.重点来了--javaScript(以highcharts为例)
var chart0 = Highcharts.chart('container', {
chart: {
panning: true,
zoomType: 'xy',//xy轴可以缩放
marginBottom: 20
},
title: {
text: '标题'
},
subtitle: {
text: '数据来源:thesolarfoundation.com'
},
scrollbar : {//显示x轴滚动条
enabled:true
},
xAxis: {
title: {//x轴标题设置
text: 'X标题',
align: 'low',//和最小的值对齐
x: -60
},
categories: [1,2,3,4,5,6,7,8,9,10,11,12],
min:0,
max:4,//设置最大值为了显示x轴滚动条
},
yAxis: {
title: {
text: '就业人数'
},
scrollbar: {
enabled: true,//允许y轴出现滚动条
showFull: false
},
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 1
}
},
series: [{
name: '安装,实施人员',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: '工人',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: '销售',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: '项目开发',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: '其他',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
highstock也一样按上面所示设置---zoomType: 'xy'--scrollbar : {...}--xAxis: {...}--yAxis: {scrollbar: {...}}- ...
效果图如下:
通过鼠标点击框下xy轴矩形区域或仅y轴区域点击滑动就能出现y轴滚动条,点击重置缩放比例就还原