如何在Highcharts及angular-highcharts导出时显示隐藏series

核心思路 #

利用Highcharts的exporting事件钩子，在导出操作开始前临时显示所有系列，导出完成后恢复原有的可见状态——既保证图表界面只展示指定系列，又能让导出的CSV/HTML表格包含所有数据。

Angular-Highcharts 具体实现步骤 #

1. 配置初始系列可见性：定义图表系列时，将需要隐藏的系列设置visible: false，仅保留目标系列可见。
2. 添加导出事件处理：在图表配置的exporting.events中，实现两个关键事件：
   • beforeExport：保存每个系列原本的可见状态，再调用show()显示所有系列
   • afterExport：根据之前保存的状态，恢复各系列的可见性

代码示例 #

import { Component } from '@angular/core';
import { Chart } from 'angular-highcharts';

@Component({
  selector: 'app-chart',
  template: '<div [chart]="chart"></div>'
})
export class ChartComponent {
  chart = new Chart({
    title: {
      text: '示例图表'
    },
    series: [
      {
        name: '展示系列',
        data: [1, 2, 3, 4, 5],
        visible: true
      },
      {
        name: '隐藏系列1',
        data: [6, 7, 8, 9, 10],
        visible: false
      },
      {
        name: '隐藏系列2',
        data: [11, 12, 13, 14, 15],
        visible: false
      }
    ],
    exporting: {
      events: {
        beforeExport: function(this: any) {
          // 保存原可见状态并显示所有系列
          this.series.forEach((series: any) => {
            series.options.oldVisible = series.visible;
            series.show();
          });
        },
        afterExport: function(this: any) {
          // 恢复原可见状态
          this.series.forEach((series: any) => {
            if (series.options.oldVisible === false) {
              series.hide();
            }
            delete series.options.oldVisible;
          });
        }
      }
    }
  });
}

说明 #

• 逻辑和你提供的示例完全一致，只是适配了angular-highcharts的组件写法
• beforeExport和afterExport中的this指向原生Highcharts Chart实例，可直接调用series.show()/hide()方法
• 通过series.options.oldVisible临时存储原状态，避免导出后图表显示异常

内容的提问来源于stack exchange，提问作者aditya rawat