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

最新推荐文章于 2025-09-29 10:49:38 发布

原创

最新推荐文章于 2025-09-29 10:49:38 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了如何在Highcharts中使用滚动条功能，确保图例和y轴固定，同时x轴可以根据数据长度动态滚动。通过引入highcharts/highstock库，并利用stockChart方法创建图表，展示了详细的代码示例。

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', {