1

我正在构建一个在 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 组件中构建的。任何帮助将不胜感激！谢谢

4

2 回答 2

0

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

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

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

xAxes: [{
    type: 'time',
    time: {
      timezone: 'America/Boise'}}]
于 2021-01-15T16:42:59.873 回答
0

使用 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

于 2022-01-10T23:27:02.490 回答