HighCharts 工具提示中的固定宽度字体真棒答案

【问题标题】：Fixed width Font Awesome in HighCharts tooltipHighCharts 工具提示中的固定宽度字体真棒
【发布时间】：2021-10-31 17:07:30
【问题描述】：

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

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

code

【问题讨论】：

标签： highcharts font-awesome

【解决方案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

【讨论】：

【解决方案2】：

你可以添加一个空字符来对齐元素&nbsp;

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

【讨论】：