Highcharts 导出 SVG 与数据预选

Question

我正在尝试将 Highcharts 桑基图导出到 SVG，并且我希望选择几个不同的矢量文件，并突出显示图表的不同部分（单击），因此我可以在预先录制的演示文稿中淡入淡出它们之间。 我想不出任何办法让导出模块导出一个 SVG，通过单击它突出显示它——它只导出“普通”图形。 任何人都可以帮忙吗？

我附上了我所追求的截图，因为我不知道如何让它们导出为矢量文件。 无论如何，数据总是像第一张图一样导出：

但我也希望它导出为以下两个图表，并选择了数据的各个部分：

Answer 1

这是我的想法，如何使用exporting.menuItemDefinition功能来实现它。

• 为每个节点创建全局标志，例如customSVGExport1 ，

• 创建具有将标志更改为 true 并触发 SVG 下载（并再次绘制图表）的功能的自定义导出菜单按钮，

   onclick: function() { customSVGExport1 = true; this.exportChart({ type: 'image/svg+xml' }); },

  • 下面 function 将被触发：

     chart: { events: { render() { let chart = this; if (customSVGExport1) { // Trigger point hover event chart.series[0].nodes[0].onMouseOver(); // Hide tooltip for export chart.tooltip.label.hide(); // Set flag back to false; customSVGExport = false; } else if (customSVGExport2) { chart.series[0].nodes[1].onMouseOver(); chart.tooltip.label.hide(); customSVGExport = false; } } } },

演示： https://jsfiddle.net/BlackLabel/x67jwsmo/

API： https://api.highcharts.com/highcharts/exporting.menuItemDefinitions

API: https://api.highcharts.com/highcharts/chart.events.render