Блог

Я создал оператор if else в моей функции форматирования всплывающих подсказок highcharts, чтобы отображать значения y из разных point.series.name . Значения из первого и второго рядов в массиве отображаются корректно, но стилизация для последнего series.name значения (HINDCAST — SPREAD) отображаются некорректно, поскольку не отображаются размер шрифта и point.series.color. Я полагаю, проблема в табличных тегах? Пожалуйста, смотрите 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;
        }
      },

  

Вы закрываете tbody перед последним значением (HINDCAST — SPREAD), после вывода за пределы цикла 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;
...
  

Скрипка