如何使用getDate（）+ 5配置Highcharts tooltip.headerFormat

Question

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

在我的工具提示中，我想在标题中显示两个日期，例如日期范围：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.

Answer 1

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

From the specs:

headerFormat：string 工具提示标题行的HTML。变量用大括号括起来。[...]

正如你所看到的，tooltip.headerFormat只接受本质上是静态的字符串。像{point.key}这样的变量将由搜索和替换机制处理。所以你不能使用tooltip.headerFormat的功能（多么可怜！）。

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

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这样的框架。

Answer 2

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