Highcharts 工具提示格式化程序函数未正确显示 table 中的值

Question

我在我的 highcharts 工具提示格式化程序函数中创建了一个 if else 语句，以便显示来自不同 point.series.name 的 y 值。数组中第一个和第二个系列的值显示正确，但最后一个 series.name 值 (HINDCAST - SPREAD) 的样式显示不正确，因为字体大小和 point.series.color 不显示。我想问题是 table 标签？请参阅 fiddle

https://jsfiddle.net/marialaustsen/w4k87jyo/

tooltip: {
        shared: true,
        useHTML: true,
        formatter: function() {
          var aYearFromNow = new Date(this.x);
          aYearFromNow.setFullYear(aYearFromNow.getFullYear() + 5);
          var tooltip = '<table><span style="font-size: 16px">' +
            Highcharts.dateFormat('%e/%b/%Y', new Date(this.x)) + '-' + Highcharts.dateFormat('%e/%b/%Y', aYearFromNow) + '</span><br/><tbody>';
          //loop each point in this.points
          $.each(this.points, function(i, point) {
            if (point.series.name === 'Observations') {

              tooltip += '<tr><th style="font-size: 14px; color: ' + point.series.color + '">' + point.series.name + ': </th>' +
                '<td style="font-size: 14px">' + point.y + '℃' + '</td></tr>'


            } else if (point.series.name === 'BOXPLOT') {



              const x = this.x;
              const currentData = this.series.data.find(data => data.x === x);
              const boxplotValues = currentData ? currentData.options : {};
              tooltip += `<span style="font-size: 14px; color: #aaeeee"> 
                            Max: ${boxplotValues.high.toFixed(2)}<br>
                      Q3: ${boxplotValues.q3.toFixed(2)}<br>
                      Median: ${boxplotValues.median.toFixed(2)}<br>
                      Q1: ${boxplotValues.q1.toFixed(2)}<br>
                      Low: ${boxplotValues.low.toFixed(2)}<br></span>`;

            } else {

              tooltip += '<tr><th style="font-size: 14px; color: ' + point.series.color + '">' + point.series.name + ': </th>' +
                '<td style="font-size: 14px">' + point.point.low + '℃ -' + point.point.high + '℃' + '</td></tr>' +
                '</tbody></table>';

            }
          });
          return tooltip;
        }
      },

Answer 1

您要在最后一个值 (HINDCAST - SPREAD) 之前关闭 tbody，一旦放在 for 循环之外它就可以工作：

...
    tooltip += '<tr><th style="font-size: 14px; color: ' + point.series.color + '">' + point.series.name + ': </th>' +
               '<td style="font-size: 14px">' + point.point.low + '℃ -' + point.point.high + '℃' + '</td></tr>'
    }
});
tooltip += '</tbody></table>';
return tooltip;
...

Fiddle

Highcharts 工具提示格式化程序函数未正确显示 table 中的值

Highcharts tooltip formatter function does not display values in table correct

if-statement

html-table

tooltip

formatter

highcharts