Highcharts 导出 SVG 与数据预选

Question

I'm trying to export a Highcharts sankey diagram to SVG, and I would like to have several different vector files with different parts of the diagram highlighted selected (clicked on), so I can fade between them in a pre-recorded presentation. I can't figure out any way to make the Export module export an SVG that has been highlighted by clicking on it—-it exports only the “plain” graph. Can anyone help?

I've attached screenshots of what I'm after, since I can't figure out how to get them to export as vector files. No matter what, the data is always exported looking like the first diagram:

But I would also like it exported as the following two diagrams with various parts of the data selected:

Answer 1

Here is my idea how to achieve it with using the exporting.menuItemDefinition feature.

• create the global flag for each node, like customSVGExport1 ,

• create the custom export menu buttons with functionality which changes the flag to true and trigger the SVG downloading (and chart rendering once again),

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

  • below function will be triggered:

     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; } } } },

Demo: https://jsfiddle.net/BlackLabel/x67jwsmo/

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

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