我有一个倒置的柱形图,并且在每个数据点的末尾,我设置了自定义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,
...
},
我尝试设置<img src="data:image/svg+xml;base64,PD94........"
,然后在屏幕上渲染图像,但是dataLabel不再排成一行,并且图标看起来太小了。尽管我认为我可以应用某些样式,但是这里的问题是,理想情况下,我想将svg作为文件从资产中导入,而不是将所有文件转换为base64字符串。
最后但并非最不重要的一点-将图形导出为PDF(具有从上面导出属性的各种迭代)向我输出:
所以,有人遇到过这个问题吗?
我也尝试过chart.events.exportData
,但没有成功。