ruby-on-rails - マテリアル アイコンがある場合、ハイチャートのツールチップが正しくレンダリングされない

Question

私の Rails アプリケーションには、Highcharts で生成されたアイコンを含むグラフがあります。アイコンは、マテリアル アイコン ジェムを介して取得した Google マテリアル デザインのアイコンです。https://github.com/Angelmmigel/material_icons .

アイコンで2つのことをしたい：

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

また、データは昇順で並べ替える必要があります。そうしないと、グラフに望ましくない図形が表示される可能性があります。