Как настроить Highcharts tooltip.headerFormat с помощью getDate () + 5 - PullRequest
Новая
       27

Как настроить Highcharts tooltip.headerFormat с помощью getDate () + 5

1 голос
/ 23 апреля 2019

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

Вотскрипка.

Ответы [ 2 ]

1 голос
/ 24 апреля 2019 
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;
    }
},
1 голос
/ 24 апреля 2019

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

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

headerFormat: string
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 .

...