如果 Highcharts 工具提示有 material 个图标，则无法正确呈现

Question

在我的 rails 应用程序中，我有一个图表，其中包含使用 Highcharts 生成的图标。这些图标是 Google Material 设计图标，我通过 material-icons gem 获得。 https://github.com/Angelmmiguel/material_icons。

我想用图标做两件事：

我想要笑脸而不是数字标签。我开始工作了

yAxis: {
        max: 5,
        min: 1,
        labels: {
            formatter: function () {
                if (this.value == 1) {
                    return '<i class="material-icons">sentiment_very_dissatisfied</i>'
                }
                if (this.value == 2) {
                    return '<i class="materialicons">sentiment_dissatisfied</i>'
                }
                if (this.value == 3) {
                    return '<i class="material-icons" height="5px">sentiment_neutral</i>'
                }
                if (this.value == 4) {
                    return '<i class="material-icons">sentiment_satisfied</i>'
                }
                if (this.value == 5) {
                    return '<i class="material-icons">sentiment_very_satisfied</i>'
                } else {
                    return this.value
                }
            }
        }
    },

我想要笑脸，而不是工具提示中的数值。这就是它出错的地方。

tooltip: {
        formatter: function () {
            var date = Highcharts.dateFormat('%d-%m-%y %H:%M',
                new Date(this.x));
            var getIcon = function (y) {
                if (y == 1) {
                    return '<i class="material-icons">sentiment_very_dissatisfied</i>'
                }
                if (y == 2) {
                    return '<i class="material-icons">sentiment_dissatisfied</i>'
                }
                if (y == 3) {
                    return '<i class="material-icons">sentiment_neutral</i>'
                }
                if (y == 4) {
                    return '<i class="material-icons">sentiment_satisfied</i>'
                }
                if (y == 5) {
                    return '<i class="material-icons">sentiment_very_satisfied</i>'
                } else {
                    return y
                }
            };
            var icon = getIcon(this.y);
            console.log(date);
            return '<b>' + this.series.name + '</b><br/>' + date + ' : ' + icon;
        },

我必须解析日期，因为它是 JavaScript 纪元时间（毫秒）。如果没有 + icon，则显示日期。如果我添加 + icon 它不起作用并且日期将无法正确呈现。我注意到图标高于线条本身。所以我认为这是一个 CSS 问题，但我不知道如何解决它。
没有:With:

提前感谢您的回复！

Answer 1

要在工具提示中使用 HTML，请启用 tooltip.useHTML 属性。

 tooltip: {
        useHTML: true

此外，数据必须按升序排序，否则图表中可能会出现不需要的图形形状。

如果 Highcharts 工具提示有 material 个图标，则无法正确呈现

Highcharts Tooltip not rendering properly if it has material icons

ruby-on-rails

highcharts

tooltip

google-material-icons