Highcharts导出图片时显示加载Spinner的实现及相关事件咨询

没问题！要在Highcharts导出图片时显示加载Spinner，或者监听导出开始/完成的事件，其实有几种靠谱的实现方式，我给你详细拆解：

一、利用Highcharts内置事件实现Spinner（推荐，适合v7.0.0+版本） #

Highcharts从v7.0.0开始提供了专门的导出相关事件，我们可以直接利用这些事件来控制Spinner的显示和隐藏：

1. 先添加Spinner的DOM和样式 #

首先在页面里加入一个隐藏的加载提示元素（可以换成你自己的Spinner图标样式）：

<div id="export-spinner" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:12px 24px; background:rgba(0,0,0,0.7); color:white; border-radius:4px; z-index:9999;">
  正在导出图表，请稍候...
</div>

2. 修改图表配置，监听导出事件 #

在你的Highcharts配置里，添加chart.events来监听exportStart和exportEnd事件，同时保留你原有的导出按钮配置：

Highcharts.chart('your-chart-container', {
  chart: {
    events: {
      // 导出开始时显示Spinner
      exportStart: function() {
        document.getElementById('export-spinner').style.display = 'block';
      },
      // 导出完成（无论成功/失败）时隐藏Spinner
      exportEnd: function() {
        document.getElementById('export-spinner').style.display = 'none';
      }
    }
  },
  exporting: {
    allowHTML: true,
    buttons: {
      contextButton: {
        menuItems: null,
        onclick: function () {
          this.exportChart({ 
            sourceWidth: 1500, 
            sourceHeight: this.chartHeight 
          }, null);
        },
        symbol: 'url(assets/images/icon_download.png)'
      }
    }
  },
  // 其他图表配置...
});

二、手动控制导出流程（兼容旧版本，更灵活） #

如果你的Highcharts版本低于v7.0.0，没有内置的导出事件，可以手动接管导出流程，通过Promise来控制Spinner的显示：

修改导出按钮的onclick函数，自己处理SVG生成、导出请求和下载逻辑：

exporting: {
  allowHTML: true,
  buttons: {
    contextButton: {
      menuItems: null,
      onclick: async function () {
        const spinner = document.getElementById('export-spinner');
        spinner.style.display = 'block';
        
        try {
          // 1. 获取图表的SVG字符串
          const svg = this.getSVG({
            sourceWidth: 1500,
            sourceHeight: this.chartHeight
          });
          
          // 2. 调用Highcharts官方导出服务（也可以换成自己的导出服务器）
          const response = await fetch('https://export.highcharts.com/', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            // 这里的参数可以调整：type支持png/jpeg/pdf/svg等，filename是下载的文件名
            body: `svg=${encodeURIComponent(svg)}&type=png&width=1500&filename=my-chart`
          });
          
          // 3. 处理下载
          const blob = await response.blob();
          const downloadUrl = URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = downloadUrl;
          link.download = 'my-chart.png';
          link.click();
          URL.revokeObjectURL(downloadUrl);
        } catch (error) {
          console.error('导出失败:', error);
          alert('图表导出失败，请稍后重试');
        } finally {
          // 无论成功失败，都隐藏Spinner
          spinner.style.display = 'none';
        }
      },
      symbol: 'url(assets/images/icon_download.png)'
    }
  }
}

三、可订阅的导出相关事件 #

除了上面用到的exportStart和exportEnd，Highcharts还提供了这些导出相关的事件：

• beforeExport: 在导出流程开始前触发，可以用来修改图表配置（比如临时隐藏某些元素）
• exportData: 当导出数据表格时触发（如果你开启了数据导出功能）

这些事件都可以在chart.events里进行监听，用法和exportStart一致。

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