highchart滚动条应用--highcharts/highstock
应用目标
1. 须要固定图例和y轴，然而x轴须要滚动的状况引入
1. 不能像一般表格一样引入highcharts，只须要引入highcharts/highstock2. 应用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', {}）去创立曲线即可。