关于highcharts:highchart滚动条使用highchartshighstock

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

成果如下：