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问题，但我不知道如何修复它无：通过：

提前感谢您的回复！

Answer 1

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

 tooltip: {
        useHTML: true

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

如果Highcharts Tooltip具有材质图标，则无法正确呈现

1 个答案: