highcharts - 自定义 dataLabels SVG 不会出现在导出 png 或 pdf highcharts 中

Question

我有倒置柱形图，在每个数据点的末尾，我设置了自定义 SVG 图标和一些文本

plotOptions: {
  column: {
    pointWidth: 1,
    cursor: 'pointer',
    dataLabels: {
      enabled: true,
      inside: false,
      crop: false,
      overflow: 'none',
      useHTML: true,
      formatter: function() {
        return `
           <div style="display: flex; align-items: center; cursor: pointer">
            <img  class="${this.point.className}-icon" src="./assets/${this.point.className}.svg" alt=${this.point.className}>
            <div style="display: flex; flex-direction: column; align-items: center; margin-left: 15px; ">
              <span style="color:#4E4E4E">${this.point.name}</span>
              <span style="color:#9E9E9E">Value: ${this.point.y}</span>
              </div>
           </div>
            }
          },
        },
      }

当我尝试将图形下载为 PNG 时，没有显示 SVG 图标。然后我加了

exporting: {
        allowHTML: true,
        ...
},

结果（导出为PNG）是

我尝试设置<img src="data:image/svg+xml;base64,PD94........"然后图像在屏幕上呈现，但 dataLabels 不再在一行中，并且图标看起来太小了。虽然我认为我可以应用一些样式，但这里的问题是理想情况下我想将 svg 作为文件从资产导入，而不是将它们全部转换为 base64 字符串。

最后但并非最不重要的一点 - 将图形导出为 PDF（从上面导出属性的各种迭代）输出我这个：

那么，有没有人遇到过这个问题：

• 我可以将不在 base64 中但在单独文件夹中的 SVG 数据标签导出为文件吗？
• 如何设置导出的 dataLabels 的样式，使其内联显示而不分成多行？
• 为什么导出为 PDF 甚至不渲染任何图标，而 PNG 可以？

我也尝试过玩，chart.events.exportData但没有任何成功。

标签： highcharts