У меня перевернутая столбцовая диаграмма, и в конце каждой точки данных я устанавливаю пользовательский значок 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........"
, а затем изображение отображалось на экран, но метки данных больше не находятся в одной строке, а значки выглядят слишком маленькими. Хотя я думаю, что я мог бы применить некоторые стили, проблема в том, что в идеале я хотел бы импортировать svg как файлы из ресурсов, а не конвертировать их все в строки base64.
И последнее по порядку, но не по значению - экспорт графика в PDF (с различными итерациями экспорта свойств сверху) выводит мне это:
Итак, кто-нибудь сталкивался с этой проблемой:
- Можно ли экспортировать метки данных SVG, которые находятся не в base64, а в отдельной папке как файлы?
- Как стилизовать экспортированные метки данных так они отображаются в строке, не разбиваясь на несколько строк?
- Почему при экспорте в PDF даже не отображаются значки, в отличие от PNG?
Я также пытался поиграться с chart.events.exportData
но безуспешно.