HighCharts 工具提示中的固定宽度 Font Awesome

Question

我正在尝试将 Font Awesome 图标添加到 HighCharts 工具提示中。我面临的问题是 Font Awesome 图标有不同的大小，所以它们在工具提示中看起来有点锯齿。在纯 html 中，有一个 easy fix 用于确保所有图标具有相同的宽度。但是我不知道如何在 HighCharts 工具提示中做到这一点，因为我使用的是 Font Awesome 图标的 unicode。

这是我的fiddle：https://jsfiddle.net/vzjkx7br/7/。当你悬停时，你会看到星星在方块的右边一点点。我想让它们对齐，宽度相同。感谢任何帮助

code

Answer 1

您可以将工具提示设置调整为这样

    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 进行测试，请不要忘记将框架和扩展设置为 jQuery

Answer 2

您可以添加一个空字符来稍微对齐元素 

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

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

在 Highcharts 中向元素添加样式的可能性有限。 Highcharts 中的文本和标签在 HTML 中提供，但由于 HTML 是在 SVG 中解析和呈现的，因此仅支持一个子集。

文档：https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html

HighCharts 工具提示中的固定宽度 Font Awesome

Fixed width Font Awesome in HighCharts tooltip

highcharts

font-awesome