Пользовательские метки данных SVG не отображаются при экспорте больших таблиц в формате png или pdf - PullRequest
0 голосов
/ 16 января 2020

У меня перевернутая столбцовая диаграмма, и в конце каждой точки данных я устанавливаю пользовательский значок 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>
            }
          },
        },
      }

enter image description here

Когда я пытаюсь загрузить график в формате PNG, значок SVG не отображается. Затем я добавил

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

И результат (экспорт в формате PNG) был enter image description here

Я попытался установить <img src="data:image/svg+xml;base64,PD94........", а затем изображение отображалось на экран, но метки данных больше не находятся в одной строке, а значки выглядят слишком маленькими. Хотя я думаю, что я мог бы применить некоторые стили, проблема в том, что в идеале я хотел бы импортировать svg как файлы из ресурсов, а не конвертировать их все в строки base64. enter image description here

И последнее по порядку, но не по значению - экспорт графика в PDF (с различными итерациями экспорта свойств сверху) выводит мне это: enter image description here

Итак, кто-нибудь сталкивался с этой проблемой:

  • Можно ли экспортировать метки данных SVG, которые находятся не в base64, а в отдельной папке как файлы?
  • Как стилизовать экспортированные метки данных так они отображаются в строке, не разбиваясь на несколько строк?
  • Почему при экспорте в PDF даже не отображаются значки, в отличие от PNG?

Я также пытался поиграться с chart.events.exportData но безуспешно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...