嘿，这个问题我之前也踩过坑！想要页面上保留滚动条方便查看长数据，同时导出时能拿到完整的图表，其实可以通过Highcharts的导出事件临时修改图表状态，导出完再恢复就行，完全不影响原有交互。

核心思路 #

利用Highcharts提供的beforeExport和afterExport钩子事件：

• 导出前临时禁用x轴滚动条、取消范围限制，让图表显示全部内容
• 导出完成后立刻恢复原有的滚动条配置，保证页面上的图表还是原来的交互状态

具体代码实现 #

在你的图表配置里添加exporting.events配置，处理导出前后的状态切换：

Highcharts.chart('container', {
  // 你的其他图表配置（比如series、tooltip、title等）
  xAxis: {
    type: 'category',
    title: { text: null },
    // 如果之前手动设置过min/max，记得在事件中处理
    // min: 0,
    // max: 4,
    scrollbar: { enabled: true },
    tickLength: 0
  },
  exporting: {
    events: {
      // 导出前触发：临时切换到无滚动条的完整图表状态
      beforeExport: function() {
        // 保存原有x轴的min/max（如果设置过的话）
        this.originalXMin = this.xAxis[0].options.min;
        this.originalXMax = this.xAxis[0].options.max;
        
        // 更新x轴配置：禁用滚动条，取消范围限制
        this.xAxis[0].update({
          scrollbar: { enabled: false },
          min: undefined,
          max: undefined
        }, false); // false表示暂不渲染，统一redraw提升性能
        
        // 重新渲染图表应用修改
        this.redraw();
      },
      // 导出完成后触发：恢复原有的滚动条和范围配置
      afterExport: function() {
        this.xAxis[0].update({
          scrollbar: { enabled: true },
          min: this.originalXMin,
          max: this.originalXMax
        }, false);
        
        // 重新渲染回到原有交互状态
        this.redraw();
      }
    }
  }
});

关键细节说明 #

• 如果你的x轴没有手动设置过min/max，可以去掉保存和恢复这部分代码，只处理滚动条的开关即可。
• update方法的第二个参数传false是为了避免多次渲染，最后统一redraw能提升性能。

这样设置后，页面上的图表依然保留滚动条方便浏览长数据，点击导出按钮时会自动生成包含全部内容的无滚动条图片，完美满足你的需求！

内容的提问来源于stack exchange，提问作者puff.tw