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

成果如下：