highchart滚动条使用--highcharts/highstock，保持y轴和图例不滚动

使用目的

1. 需要固定图例和y轴，但是x轴需要滚动的情况

引入

1. 不能像普通表格一样引入highcharts，只需要引入highcharts/highstock
2. 使用import HighStock from 'highcharts/highstock' 替换 import HighStock from 'highcharts'

使用

1. 使用方式上用HighStock.stockChart代替highcharts.chart

效果

完整代码

ceshi.vue文件

<template>
    <div class="vue3">
        <div id="container" style="height: 400px; min-width: 320px; max-width: 600px; margin: 0 auto"></div>
    </div>
</template>

<script>
import HighStock from 'highcharts/highstock'
export default {
    data() {
        return {}
    },
    mounted() {
        var chart = HighStock.stockChart('container', {
       		chart: {
       			type: 'bar',
       			marginLeft: 150
       		},
       		title: {
       			text: '截止 2016年4月 Highcharts 最受欢迎的功能需求'
       		},
       		subtitle: {
       			text: 'Source: <a href="https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api">UserVoice</a>'
       		},
       		xAxis: {
       			type: 'category',
       			title: {
       				text: null
       			},
       			min: 0,
       			max: 4,
       			scrollbar: {
       				enabled: true
       			},
       			tickLength: 0
       		},
       		yAxis: {
       			min: 0,
       			max: 1200,
       			title: {
       				text: '投票数',
       				align: 'high'
       			}
       		},
       		plotOptions: {
       			bar: {
       				dataLabels: {
       					enabled: true
       				}
       			}
       		},
       		legend: {
       			enabled: false
       		},
       		credits: {
       			enabled: false
       		},
       		series: [{
       			name: '投票',
       			data: [
       				["甘特图", 1000],
       				["自动计算趋势线", 575],
       				["增加导航器用于多个数据列", 523],
       				["动态调整图表字体", 427],
       				["多坐标轴及对其方式控制", 399],
       				["不规则时间的堆叠图", 309],
       				["图表高度根据图例高度自适应", 278],
       				["图表数据导出为 Excel 文件", 239],
       				["图例切换", 235],
       				["韦恩图", 203],
       				["范围选择器可调整位置", 182],
       				["可拖动的图例", 157],
       				["桑基图", 149],
       				["Highstock Y轴滚动条", 144],
       				["x轴分组", 143],
       				["ReactJS 插件", 137],
       				["3D 曲面图", 134],
       				["在股票图中数据分析线", 118],
       				["数据库功能模块", 118],
       				["可拖动的点", 117]
       			]
       		}]
       	});
    }
}
</script>

<style>
    #container {
        width: 500px;
    }
</style>

注：如果需要去掉左侧的缩放控制条，则可以采用只有控制条的方式，用max来控制

改成引入
import Highcharts from “highcharts”;
import highstock from ‘highcharts/modules/stock’
highstock(Highcharts);
使用new Highcharts.Chart(‘container’, {}）去创建曲线即可。

效果如下：