Настроить всплывающую подсказку для показа datetime

Я разрабатываю проект, который должен показать этот график: http://jsfiddle.net/Kc23N/

Когда я нажимаю точку (подсказка), я хочу показать дату понятной, а не значение в миллисекундах.

Мне кажется, нужно изменить этот кусок кода:

tooltip: {
      headerFormat: '<b>{series.name}</b><br>',
      pointFormat: '{point.x} date, {point.y} Kg',                        
}

как мне это сделать? любая помощь приветствуется.

Спасибо

Ответ 1

Вы можете использовать moment.js, чтобы получить форматированные значения, но в Highcharts есть собственные функции форматирования даты, которые были бы более идиоматичными с Highcharts. Он может быть прикреплен к опции всплывающей подсказки в конструкторе highcharts следующим образом:

        tooltip: {
            formatter: function() {
                return  '<b>' + this.series.name +'</b><br/>' +
                    Highcharts.dateFormat('%e - %b - %Y',
                                          new Date(this.x))
                + ' date, ' + this.y + ' Kg.';
            }
        }

Вы также можете добавить объект dateTimeLabelFormats с параметрами, которые вам нужны для ваших дат, в разделе xAxis.

Я сделал этот пример с вашим code

Ответ 2

Вы должны использовать xDateFormat в подсказке для настройки даты вашего формата
http://api.highcharts.com/highcharts#tooltip.xDateFormat

sample:
tooltip: {
           xDateFormat: '%Y-%m-%d'
         },

Ответ 3

Вам нужно вернуть форматированную дату в всплывающей подсказке с помощью форматирования всплывающих подсказок.

Вот вам API-интерфейс форматов tooltip.

Для форматирования части даты вы можете использовать Highcharts.dateFormat()

Формат представляет собой подмножество форматов для функции PHP strftime.

Вы также можете ссылаться на PHP strftime для более форматов даты.

Мне удалось отформатировать вашу подсказку, как показано ниже.

  tooltip: {
                formatter: function() {
                    return  '<b>' + this.series.name +'</b><br/>' +
                        Highcharts.dateFormat('%e - %b - %Y',
                                              new Date(this.x))
                    + '  <br/>' + this.y + ' Kg.';
                }
            }

Ответ 4

Вы можете использовать фильтр шаблонов {value:%Y-%m-%d}.

Пример:

headerFormat: '<span style="font-size: 10px">{point.key:%Y-%m-%d}</span><br/>'