highcharts,highstock的y轴滚动条和区域放大图表但不改变数据的值

废话不多说,上代码

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轴滚动条,点击重置缩放比例就还原