Highcharts合并图表导出仅下载PNG问题及选中项获取咨询

一、修复导出始终为PNG格式的问题 #

你的代码里导出格式固定为PNG的核心原因是：自定义的exportCharts函数没有接收用户在右键菜单中选择的导出类型参数，而是直接沿用了Highcharts默认的导出配置（默认格式为PNG）。我们只需要调整函数逻辑，传递并应用用户选择的格式即可：

修改步骤： #

1. 让自定义导出函数接收用户选择的配置
   将Highcharts.exportCharts = function() {修改为：

   Highcharts.exportCharts = function(exportOptions) {
   

   这里的exportOptions会自动携带用户选择的导出类型（比如{ type: 'jpeg' }或{ type: 'pdf' }等）。

2. 合并用户选择的配置到导出选项中
   将var options = Highcharts.merge(Highcharts.getOptions().exporting, {});修改为：

   var options = Highcharts.merge(Highcharts.getOptions().exporting, exportOptions || {});
   

   这样用户选择的导出类型会覆盖默认配置，不再一直使用PNG格式。

3. 表单参数无需额外修改
   原代码中type : options.type已经能正确读取合并后的类型，这部分保持原样即可。

修改后的完整exportCharts函数片段：

Highcharts.exportCharts = function(exportOptions) {
  var charts = [];
  jq(".test-timeline-chart .highcharts-container")
    .each(function(i, e) {
      charts.push(Highcharts.charts[jq(e).parent().data().highchartsChart]);
    });
  var form;
  svg = Highcharts.getSVG(charts);
  // 合并默认配置和用户选择的配置
  var options = Highcharts.merge(Highcharts.getOptions().exporting, exportOptions || {});
  // 后续表单创建、提交逻辑保持不变
  // ...（原代码后续部分）
};

修改完成后，用户选择不同的导出格式（JPEG、PDF、SVG等）时，导出文件就会对应正确的格式了。

二、获取右键菜单选中的菜单项 #

当然可以获取选中的菜单项，有两种实用方式：

方式1：在菜单项的onclick事件中直接获取 #

你已经在代码里修改了第一个菜单项的点击事件，这里可以直接通过this获取当前菜单项的信息：

instanceChart.options.exporting.buttons.contextButton.menuItems[0].onclick = function() {
  printAll();
  // this指向当前被点击的菜单项对象
  console.log('选中的菜单项文本:', this.text);
  console.log('菜单项内置标识:', this.key); // 比如'printChart'对应打印选项
};

this对象包含了菜单项的所有属性，比如text（显示文本）、key（内置标识）等，可直接用来判断选中的选项。

方式2：监听exportmenuItemClick全局事件 #

如果需要统一监听所有菜单项的点击，可以给图表实例绑定exportmenuItemClick事件：

instanceChart.on('exportmenuItemClick', function(event) {
  var clickedItem = event.item;
  console.log('选中的菜单项:', clickedItem.text);
  console.log('菜单项类型:', clickedItem.key);
  // 根据key做针对性处理，比如：
  if (clickedItem.key === 'downloadPNG') {
    // 处理PNG下载逻辑
  } else if (clickedItem.key === 'downloadPDF') {
    // 处理PDF下载逻辑
  }
});

这个事件会在任何导出菜单项被点击时触发，event.item就是被点击的菜单项对象，适合全局统一处理场景。

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