如何使用 getDate() + 5 配置 Highcharts tooltip.headerFormat答案

【问题标题】：How to configure Highcharts tooltip.headerFormat with getDate() + 5如何使用 getDate() + 5 配置 Highcharts tooltip.headerFormat
【发布时间】：2019-04-23 16:23:10
【问题描述】：

这应该非常简单，但我无法弄清楚 JavaScript 函数 getDate 如何与 xAxis 上的 Highcharts datetime 一起工作。

在我的工具提示中，我想在标题中显示两个日期，例如日期范围：1960/1/1 - 1965/1/1。

第一个日期是我的数据集中的 point.key（这是一个 unix 时间戳），我知道如何设置它，但显示的第二个日期必须是 {5 years plus point.key}。

尽管我对 JavaScript 的了解有限，但我知道 JavaScript 有一个功能：

function getdate() {
    var tt = document.getElementById('txtDate').value;

    var date = new Date(tt);
    var newdate = new Date(date);

    newdate.setDate(newdate.getDate() + 3);

    var dd = newdate.getDate();
    var mm = newdate.getMonth() + 1;
    var y = newdate.getFullYear();

    var someFormattedDate = mm + '/' + dd + '/' + y;
    document.getElementById('follow_Date').value = someFormattedDate;
}

有什么方法可以在我的工具提示中使用该功能并在其中生成第二个日期

tooltip.headerFormat: '<span style="font-size: 16px">' +
                      '{point.key} - {point.key + 5 years}</span><br/>';

Here is a fiddle.

【问题讨论】：

point.key 的格式为“1999/9/9”？
point.key 是一个 unix 毫秒时间戳，我设置了工具提示格式： tooltip: { xDateFormat: '%Y/%m/%d'
你看我的回答了吗？这不是最好的消息，不是吗？
是的，谢谢，我正在尝试实施。不太确定如何返回工具提示中的字符串：请参阅小提琴jsfiddle.net/marialaustsen/w4k87jyo
var aYearFromNow = new Date(this.x); aYearFromNow.setFullYear(aYearFromNow.getFullYear() + 5);

标签： javascript date highcharts tooltip getdate

【解决方案1】：

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

【讨论】：

【解决方案2】：

有什么方法可以在我的工具提示中使用该函数并在工具提示 headerFormat[?] 中生成第二个日期

From the specs:

标题格式：字符串
工具提示标题行的 HTML。变量用大括号括起来。[...]

如您所见，tooltip.headerFormat 只接受本质上是静态的字符串。 {point.key} 之类的变量将由搜索和替换机制处理。所以你不能使用tooltip.headerFormat 的函数（真可怜！）。

如果您想使用可以动态处理值的格式化程序，这意味着您必须使用回调函数tooltip.formatter:

格式化程序：Highcharts.TooltipFormatterCallbackFunction
从头开始格式化工具提示文本的回调函数。[...]

正如您在第一次尝试tooltip.formatter 时所看到的，您似乎必须重写您的工具提示代码库。但这可能是因为您在开始编写之前没有充分检查您的先决条件。同样在这个答案中这样做肯定太多了......

“+5 年”部分：

var oDate = new Date( point.key );
return (5 + oDate.getFullYear()) + '/' + // add 5 years
       (1 + oDate.getMonth())    + '/' + // (January gives 0)
       oDate.getDate();

注意：以上仅适用于普通年份，但并非每一年实际上都有 365 天
如果您还想在计算中实现闰年，我推荐使用像 momentjs.com 这样的框架。

【讨论】：