Highcharts导出SVG，并预选数据。

Posted 2021-03-19

我正试图将一个Highcharts sankey图导出为SVG，我想让几个不同的矢量文件与图表的不同部分高亮选择（点击），这样我就可以在一个预先录制的演示文稿中在它们之间淡化。我不知道有什么方法可以让导出模块导出一个通过点击而被高亮显示的SVG--它只导出 "普通 "图形。有谁能帮助我吗？

我附上了我想要的截图，因为我不知道如何让它们导出为矢量文件。无论怎样，数据总是以第一张图的样子导出。

但我也希望它能导出为下面两张图 并选择数据的不同部分。

答案

下面是我的想法，如何实现它与使用的是 导出.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.netBlackLabelx67jwsmo

API。https:/api.highcharts.comhighchartsexporting.menuItemDefinitions。

API。https:/api.highcharts.comhighchartschart.event.render。