Блог

Это должно быть очень просто, но я не могу понять, как функция JavaScript getDate работает вместе с Highcharts datetime на 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/>';
  

Вот скрипка.

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

Могу ли я каким-либо образом использовать эту функцию в моей всплывающей подсказке и сгенерировать вторую дату в tooltip headerFormat[?]

Из спецификаций:

headerFormat: строка
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.