javascript - Highcharts 导出带有预选数据的 SVG

Question

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

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

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

标签： javascriptsvgchartshighchartsvector-graphics

Answer 1

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

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

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

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

  • 将触发以下功能：

     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