Форматировать диаграмму. js метки оси x для указания c часовой пояс - PullRequest
Новая
       28

Форматировать диаграмму. js метки оси x для указания c часовой пояс

0 голосов
/ 17 июня 2020

Я строю диаграмму. js линейная диаграмма, которая отображает время по оси x. Я намеренно передаю данные в диаграмму в формате ut c, например: 

[{
 y: 143,
 x: "2020-06-17T19:50:50Z"
},
...
]

Кажется, что диаграмма автоматически форматирует метки деления в соответствии с часовым поясом пользователя, просматривающего диаграмму. Но иногда данные просматриваются в другом часовом поясе, чем тот, в котором они собираются, поэтому я хочу, чтобы метки меток отображались в этой зоне, которую я сохранил в localStorage.timezone, что будет точной строкой, такой как «America / New_York».

Как я могу отобразить метки оси x в желаемом часовом поясе?

Вот моя конфигурация оси x: 

       xAxes: [{
            min: leftEnd,
            max: rightEnd,
            maxBarThickness: 10,
            type: 'time',
            time: {
              displayFormats: {
                'second': 'MMM DD h:mm a',
                'minute': 'MMM DD h:mm a',
                'hour': 'MMM DD h:mm a',
                'day': 'MMM DD h:mm a',
                'month': 'MMM DD h:mm a',
                'year': 'MMM DD h:mm a',
              },
              parser: function (utcMoment) {
                console.log( DateTime.fromISO(utcMoment, { zone: localStorage.timezone })
                .toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)) //logs as desired
                return DateTime.fromISO(utcMoment, { zone: localStorage.timezone })
                .toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS) 
                // but has no effect on the actual chart label
              }           
            },
            ticks: {
              maxTicksLimit: 11,
              autoSkip: true,
              maxRotation: 0,
              minRotation: 0
            },
            gridLines: {
              drawTicks: true,
              tickMarkLength: 10,
              display: false
            }
          }],

Я использую библиотеку luxon / moment для форматирования дата, которая входит, и консоль регистрирует правильно (например, June 17, 2020, 9:11:20 AM EDT), но этот формат вообще НЕ отображается на фактической визуализации диаграммы. Он по-прежнему выглядит как June 17 6:11 AM (так как это было указано в объекте displayFormat, но удаление этого не помогает)

Я также пытался указать timezone: localStorage.timezone, но не повезло

Если это помогает, все это построено в компоненте Angular. Любая помощь будет принята с благодарностью! Спасибо

...