Блог

Я пытаюсь добавить значки Font Awesome во всплывающую подсказку HighCharts. Проблема, с которой я сталкиваюсь, заключается в том, что значки Font Awesome имеют разные размеры, поэтому во всплывающей подсказке они выглядят немного неровными. В чистом html это легко исправить, чтобы убедиться, что все значки имеют одинаковую ширину. Однако я не мог понять, как это сделать во всплывающих подсказках HighCharts, потому что я использую Юникод значков Font Awesome.

Это моя скрипка: https://jsfiddle.net/vzjkx7br/7 /. При наведении курсора вы увидите, что звездочка находится немного правее квадрата. Я хотел бы выровнять их по ширине. Ценю любую помощь

 code
 

Вы можете настроить настройку всплывающей подсказки следующим образом

     tooltip: {
        shared: true,
        useHTML: true,
        formatter: function () {
          let s = `<div><b>${this.x}</b>`;
          $.each(this.points, function () {
            var name = this.series.name
            var shape
            if(name === 'Sea-Level Pressure') {
                shape = 'fa-square'
            } else {
                shape = 'fa-star'
            }
            s  = `<br/><span style="color: ${this.series.color};"><i class="far ${shape} fa-fw"></i>${this.y}</span>`;
          });
          return s  = '</div>';
        }
    }
 

если вы тестируете это с помощью JSFiddle, не забудьте установить framework amp; extension как jQuery

Вы можете добавить пустой символ, чтобы немного выровнять элементы amp;nbsp;

https://jsfiddle.net/BlackLabel/4rxwzfqc/

         if(name === 'Sea-Level Pressure') {
            shape = 'amp;nbsp;'
        } else {
            shape = ''
        }
 

Возможности добавления стилей к элементам в Highcharts ограничены.
Текст и метки в Highcharts предоставляются в формате HTML, но поскольку HTML анализируется и отображается в формате SVG, поддерживается только подмножество.

Документация: https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html