将 chart.js x 轴标签格式化为特定时区答案

【问题标题】：Format chart.js x-axis labels to specific timezone将 chart.js x 轴标签格式化为特定时区
【发布时间】：2020-06-17 20:46:39
【问题描述】：

我正在构建一个在 x 轴上显示时间的 chart.js 折线图。我故意将数据以 utc 格式传递给图表，如下所示：

[{
 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 组件中构建。任何帮助将不胜感激！谢谢

【问题讨论】：

标签： typescript chart.js momentjs luxon

【解决方案1】：

关于这个主题的大多数其他建议都指向使用像您的示例这样的解析器。无论出于何种原因，我都无法让它为我工作。就像你描述的那样，我从来没有看到我的图表有任何视觉变化，基于我在解析器中输入的内容。

我能够使用 Chart.js 2.7.0 获得以下功能。请注意，同样的解决方案不适用于更高版本的 Chart.js（我尝试了 2.7.2 和 2.9.4 版本，但无济于事）。

这将以指定的格式显示 x 轴标签。

xAxes: [{
    type: 'time',
    time: {
      timezone: 'America/Boise'}}]

【讨论】：

【解决方案2】：

使用 Chart.js 3.x 和 luxon，您可以将时区作为选项传递给 chartjs-adapter-luxon，例如：

options: {
    scales: {
        x: {
            type: 'time',
            time: {
                unit: 'second',
                displayFormats: {
                    second: 'MMM d, yyyy, h:mm:ss a'
                }
            },
            adapters: {
                date: {
                    zone: 'UTC+6'
                }
            },
            ticks: {
                source: 'data'
            }
        }
    }
}

来源：

https://github.com/chartjs/chartjs-adapter-luxon/blob/v1.1.0/README.md#configuration

https://github.com/chartjs/chartjs-adapter-luxon/blob/v1.1.0/test/specs/luxon-adapter.spec.js#L25-L29

【讨论】：