Question

我正在构建一个chart.js折线图，它在x轴上显示时间。我故意将数据以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组件中构建。任何帮助将不胜感激！谢谢

Answer 1

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

我能够使用 Chart.js 2.7.0 使以下内容正常工作。请注意，使用更高版本的 Chart.js 时，同样的解决方案不起作用（我尝试了 2.7.2 和 2.9.4 版本但无济于事）。

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

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

将chart.js x轴标签的格式设置为特定时区

1 个答案: