highchart滚动条使用--highcharts/highstock

highchart滚动条使用--highcharts/highstock

使用目的

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', {}）去创建曲线即可。

效果如下：