React中Highcharts如何将UTC时间戳显示为America/Edmonton时区

前置依赖 #

首先确保安装必要的依赖包：

npm install moment moment-timezone
# 或
yarn add moment moment-timezone

全局配置（所有图表生效） #

在项目入口文件（如index.js或App.js）中，通过Highcharts.setOptions设置全局时区：

import Highcharts from 'highcharts';
import moment from 'moment';
import 'moment-timezone';

// 全局设置Highcharts时区
Highcharts.setOptions({
  time: {
    timezone: 'America/Edmonton',
    moment: moment
  }
});

配置完成后，所有Highcharts图表都会自动将UTC时间戳转换为America/Edmonton时区展示。

单图表独立配置 #

如果只需要特定图表使用该时区，可在组件内的图表配置中单独设置：

import React from 'react';
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';
import moment from 'moment';
import 'moment-timezone';

const EdmontonTimeChart = () => {
  const chartOptions = {
    xAxis: {
      type: 'datetime'
    },
    time: {
      timezone: 'America/Edmonton',
      moment: moment
    },
    series: [{
      // 注意：数据中的时间戳必须是UTC毫秒级（如用Date.UTC生成）
      data: [
        [Date.UTC(2024, 4, 1, 12, 0), 15],
        [Date.UTC(2024, 4, 1, 14, 0), 25]
      ]
    }]
  };

  return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
};

export default EdmontonTimeChart;

关键注意事项 #

• 必须引入moment-timezone，否则moment无法识别时区数据，配置会失效。
• 确保传入图表的时间戳是UTC格式的毫秒数（比如后端返回的UTC时间转毫秒，或用Date.UTC()生成），不能是浏览器本地时间的时间戳。

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