Highcharts изменение всплывающей подсказки datetime с форматером - PullRequest
Новая
       20

Highcharts изменение всплывающей подсказки datetime с форматером

0 голосов
/ 07 февраля 2019

У меня есть график, который выглядит как ниже.По умолчанию каждое значение всплывающей подсказки находится в своем собственном всплывающем окне всплывающей подсказки с датой и временем в нижней части оси Y (зависание над метками X).

default tooltip

Проблема заключается в том, что изменение формата даты и времени для соответствия локали не является динамическим с Highcharts.Я знаю, что пользователи могут изменить dateTimeLabelFormats в соответствии с их языковым стандартом, но я пытаюсь использовать moment.js и встроенное форматирование их языкового стандарта.

Мне нужно только изменить дату и время на этих графиках ибольше ничего.

Когда я пробую этот код ниже, он дает мне нужный мне языковой рычаг, но всплывающие подсказки объединяются в 1 блок и не имеют такого ощущения, как по умолчанию.

tooltip: {
    enabled: true,
    dateTimeLabelFormats: {
        //minute: '%e %b %H:%M',
        hour: '%e %b %H:%M'
    },
    // For locale control with moment. Combined momentjs with this answer https://stackoverflow.com/a/33939715/1177153
    formatter: function() {
        var toolTipTxt = '<b>'+ moment.unix(this.x / 1000).format("LLL") +'</b>';  
          $.each(this.points, function(i, point) {
            toolTipTxt += '<br/><span style="color:'+ point.series.color +'">  ' + point.series.name + ': ' + point.y+'</span>';
        });
        return toolTipTxt;
    },
    crosshairs: true,
    shared: true
},

moment.js locale formatting

Есть ли способ эмулировать всплывающую подсказку по умолчанию с помощью средства форматирования?Отдельные «пузырьки» для значений и отметки времени, зависшие внизу?

Можно ли как-то использовать xDateFormat с moment.js?

1 Ответ

0 голосов
/ 07 февраля 2019

Я нашел решение, которое работает, прямо из документации Highcharts API для всплывающей подсказки .

В примере jsfiddle из документации по API было все, что мне было нужно (кроме moment.js).

Я, должно быть, сегодня пропустил это 100 раз.Вот последний код, который сработал для меня, и скриншот с результатом.

Теперь заголовок всплывающей подсказки будет в правильной локали без изменения пользователем кода.

tooltip: {
    enabled: true,
    // For locale control with moment.js - https://api.highcharts.com/highcharts/tooltip.split
    formatter: function () {
        // The first returned item is the header, subsequent items are the points
        return [moment.unix( this.x / 1000).format("LLL")].concat(
            this.points.map(function (point) {
                return "<span style='color:" + point.series.color + "'>\u25CF</span> " + point.series.name + ': ' + point.y;
            })
        );
    },
    split: true,
},

enter image description here

...