Highcharts配置useUTC:false仍显示UTC时间而非本地时间的问题

问题原因 #

你已经设置了全局的time.useUTC: false，但Highcharts的x轴组件支持单独覆盖该配置，导致全局设置未生效；同时未明确指定时间标签的格式化规则，图表仍按UTC逻辑渲染时间。

修复方案 #

1. 为xAxis单独设置useUTC: false #

在xAxis配置中添加该属性，确保轴上的时间标签强制遵循本地时间逻辑：

"xAxis": {
    "lineWidth": 1,
    "lineColor": "#d2d8db",
    "labels": {
        "style": {
            "fontFamily": "Open Sans",
            "fontWeight": "400",
            "fontSize": "0.75rem",
            "color": "#3f5c69"
        }
    },
    "type": "datetime",
    "useUTC": false // 新增配置，优先级高于全局设置
}

2. 明确时间标签格式化规则（可选但推荐） #

为xAxis添加dateTimeLabelFormats，指定不同时间粒度下的本地时间显示格式，避免默认格式的模糊性：

"xAxis": {
    // ... 原有配置
    "useUTC": false,
    "dateTimeLabelFormats": {
        hour: '%H:%M', // 小时级显示时分
        day: '%Y-%m-%d' // 天级显示年月日
    }
}

3. 确保Tooltip使用本地时间 #

如果tooltip仍显示UTC时间，为tooltip添加useUTC: false配置：

"tooltip": {
    "resolution": "Hour",
    "useUTC": false // 新增配置，强制tooltip使用本地时间
}

修改后的核心配置片段 #

{
    "time": {
        "useUTC": false
    },
    "xAxis": {
        "lineWidth": 1,
        "lineColor": "#d2d8db",
        "labels": {
            "style": {
                "fontFamily": "Open Sans",
                "fontWeight": "400",
                "fontSize": "0.75rem",
                "color": "#3f5c69"
            }
        },
        "type": "datetime",
        "useUTC": false,
        "dateTimeLabelFormats": {
            hour: '%H:%M',
            day: '%Y-%m-%d'
        }
    },
    "tooltip": {
        "resolution": "Hour",
        "useUTC": false
    },
    // ... 其他原有配置
}

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