ruby-on-rails - 如果 Highcharts 工具提示具有材质图标，则无法正确呈现

Question

在我的 rails 应用程序中，我有一个图表，其中包含使用 Highcharts 生成的图标。这些图标是我通过材料图标宝石获得的谷歌材料设计图标。https://github.com/Angelmmiguel/material_icons。

我想用图标做两件事：

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

   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
                   }
               }
           }
       },
   

   

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

   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

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