ChartJS如何通过Moment.js修改X轴时区（替换本地时区）

嘿，这个问题我之前也碰到过！Chart.js 的时间轴默认会用你电脑的本地时区来解析时间戳，要切换到其他时区的话，得结合 Moment.js 的时区扩展（moment-timezone）来配置，具体步骤如下：

第一步：确保你已经引入了必要的库 #

除了 Chart.js 和基础的 Moment.js，你还需要引入 moment-timezone 库——因为基础版 Moment.js 不带时区数据支持。

第二步：修改 XAxes 的配置 #

在你的 time 配置项里添加 timezone 参数，直接指定你想要的时区即可（比如 UTC、Asia/Shanghai、Europe/London 这类标准时区标识符）。修改后的代码如下：

scales: {
  xAxes: [{
    type: "time",
    time: {
      unit: 'second',
      unitStepSize: 3600,
      tooltipFormat: "MMM D, h:mm:ss a",
      displayFormats: { 
        second: 'MMM D, h:mm:ss a' 
      },
      // 关键：添加时区配置
      timezone: 'UTC' // 替换成你需要的时区，比如 'Asia/Shanghai'
    },
    ticks: { 
      fontSize: 15, 
      bounds: 'data', 
      autoSkip: false 
    }
  }]
}

额外说明 #

• 如果你用的时区比较小众，要确保 moment-timezone 库已经包含了对应的时区数据。如果没有，你可以手动加载时区数据（比如通过 moment.tz.add() 方法添加）。
• 另一种思路是提前把所有时间戳转换成对应时区的 Moment 对象再传给 Chart.js，比如：

  xlabel = [1527206400000, 1527209672000, ...].map(timestamp => 
    moment.tz(timestamp, 'Asia/Shanghai')
  );
  

  不过直接在 Chart.js 的配置里设置 timezone 会更简洁。

这样配置后，X 轴就会按照你指定的时区来显示时间啦！

内容的提问来源于stack exchange，提问作者Tenz