Highcharts自定义按钮导出PNG问题：exportChart丢数据及导入报错求助

嘿，我来帮你搞定这个Highcharts自定义导出按钮的问题！咱们一步步拆解解决：

你设置了exporting.enabled: false来隐藏自带按钮，但这时候如果导出模块没正确加载，或者调用exportChart时没传递完整的图表配置，就会出现数据丢失的情况。

关键要注意：即使禁用自带导出按钮，也需要确保exporting和export-data模块被正确引入，这两个模块负责处理导出逻辑和数据序列化。另外，调用exportChart时，你可以主动传递当前图表的核心配置（比如数据系列），确保导出的图表和当前展示的一致：

exportPNG(): void {
  // 主动传递当前图表的系列数据，避免丢失
  this.chart.exportChart({
    type: 'image/png' // 指定导出格式
  }, {
    series: this.chart.series.map(series => ({
      name: series.name,
      data: series.data
    }))
  });
}

在Angular项目里，不推荐使用require来引入Highcharts模块，应该用ES6的import语法，更符合Angular的模块化规范。步骤如下：

1. 首先确保你已经安装了必要的依赖：

npm install highcharts highcharts-angular @types/highcharts --save

2. 在你的图表组件里，导入并初始化导出模块：

import * as Highcharts from 'highcharts';
// 导入导出模块
import exportingModule from 'highcharts/modules/exporting';
import exportDataModule from 'highcharts/modules/export-data';

// 初始化模块，绑定到Highcharts实例
exportingModule(Highcharts);
exportDataModule(Highcharts);

这样就替代了require的写法，不会再出现导入报错的问题。

这里给你一个完整的Angular组件示例，包含自定义导出按钮和正确的导出逻辑：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import exportingModule from 'highcharts/modules/exporting';
import exportDataModule from 'highcharts/modules/export-data';

// 初始化导出模块
exportingModule(Highcharts);
exportDataModule(Highcharts);

@Component({
  selector: 'app-custom-export-chart',
  template: `
    <div #chartContainer style="width: 800px; height: 400px;"></div>
    <button (click)="exportPNG()" style="margin-top: 10px;">导出PNG图片</button>
  `
})
export class CustomExportChartComponent implements AfterViewInit {
  @ViewChild('chartContainer') chartContainer!: ElementRef;
  chart!: Highcharts.Chart;

  ngAfterViewInit(): void {
    // 初始化图表
    this.chart = Highcharts.chart(this.chartContainer.nativeElement, {
      exporting: {
        enabled: false // 禁用自带导出按钮
      },
      title: {
        text: '自定义导出按钮示例'
      },
      series: [{
        name: '示例数据',
        data: [12, 34, 23, 56, 45, 78, 67]
      }]
    });
  }

  exportPNG(): void {
    // 调用导出函数，确保数据完整
    this.chart.exportChart({
      type: 'image/png',
      filename: '我的自定义图表'
    }, {
      // 传递当前图表的核心配置，防止数据丢失
      series: this.chart.series.map(s => ({
        name: s.name,
        data: s.data
      }))
    });
  }
}

• 确保this.chart是已经初始化完成的有效Highcharts实例（比如在ngAfterViewInit里初始化，避免在组件构造函数里调用）
• 如果你的图表数据是动态加载的，要确保在数据加载完成后再调用exportChart
• 若仍有问题，可以检查浏览器控制台的报错信息，通常会提示缺失的模块或配置问题

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