Angular中Highcharts如何导出显示所有tooltip的图片、PDF及JPEG文件

Highcharts默认导出行为不会包含页面上渲染的Tooltip内容，需要通过自定义导出配置、导出前主动渲染所有Tooltip的方式实现需求，兼容PNG、JPEG、PDF三种导出格式。

第一步：引入必要依赖 #

首先确保你已经安装了highcharts、highcharts-angular，并且引入了导出相关的模块，在组件顶部添加以下导入代码：

import * as Highcharts from 'highcharts';
import exportingModule from 'highcharts/modules/exporting';
import exportDataModule from 'highcharts/modules/export-data';
import offlineExportingModule from 'highcharts/modules/offline-exporting';

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

第二步：调整图表配置 #

你原有Tooltip配置可以保留，额外添加exporting配置段，实现导出时自动渲染所有Tooltip：

export class YourChartComponent {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    // 你原有其他图表配置（xAxis、yAxis、series等）
    tooltip: {
      hideDelay: 0,
      headerFormat: '',
      enabled: true,
      split: true,
      animation: false,
      valueDecimals: 2,
      outside: true,
      shared: false,
    },
    exporting: {
      // 导出时额外缩放，保证图片清晰度
      scale: 2,
      // 导出前的钩子函数，主动渲染所有数据点的Tooltip
      chartOptions: {
        tooltip: {
          // 导出时临时关闭outside，避免Tooltip超出画布被截断
          outside: false,
          // 自定义formatter，显示所有符合条件的点的Tooltip
          formatter: function() {
            // 这里可以根据你的需求调整，渲染所有你需要展示的点信息
            const points = this.series.chart.series.flatMap(s => s.points);
            let tooltipHtml = '';
            points.forEach(p => {
              tooltipHtml += `<span style="color:${p.color}">●</span> ${p.series.name}: <b>${p.y?.toFixed(2)}</b><br/>`;
            });
            return tooltipHtml;
          }
        },
        // 导出时主动触发Tooltip显示
        load: function() {
          const chart = this as any;
          const allPoints = chart.series.flatMap((s: any) => s.points);
          // 触发所有点的Tooltip显示
          chart.tooltip.refresh(allPoints);
        }
      },
      // 配置导出按钮支持的格式
      buttons: {
        contextButton: {
          menuItems: [
            'downloadPNG',
            'downloadJPEG',
            'downloadPDF'
          ]
        }
      }
    }
  };
}

第三步：手动触发导出（可选） #

如果你不需要内置导出按钮，想要自定义按钮触发导出，可以调用以下方法：

// 导出为PNG
this.Highcharts.charts[0].exportChart({type: 'image/png'});
// 导出为JPEG
this.Highcharts.charts[0].exportChart({type: 'image/jpeg'});
// 导出为PDF
this.Highcharts.charts[0].exportChart({type: 'application/pdf'});

效果示意图 #

注意事项 #

• 如果你只需要导出当前页面上显示的单个Tooltip，不需要所有点的Tooltip，可以去掉exporting.chartOptions里的自定义formatter，只保留load钩子触发当前选中点的refresh即可
• 导出时临时关闭outside: true是为了避免Tooltip在画布外被截断，如果你确认Tooltip尺寸不会超出图表范围可以保留原有配置

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