ApexCharts折线图显示日期与SQL实际日期不符问题排查

实际从SQL数据库获取的日期范围为2025年5月12日至2025年6月10日，但ApexCharts展示的起始/结束日期却往前偏移了一天，这种问题的核心原因几乎都是时区不匹配，下面给出具体修复方案：

前端修复方案 #

1. 修正日期转换逻辑，避免时区偏移 #

后端返回的日期如果是不带时区的ISO格式（如2025-05-12），直接用new Date()解析时会被浏览器按本地时区处理，若本地时区比UTC早，会导致日期被调整为前一天的UTC时间。可以通过以下方式修正：

修改前端fetchGrowth函数中的日期转换代码：

// 替换原来的new Date(item.date)
const weight_series = api_data.map(item => {
    // 方式1：强制按UTC日期解析，确保日期不偏移
    const x = new Date(item.date + 'T00:00:00Z');
    const y = item.weight
    return { x, y }
});

// 或者方式2：提取纯日期部分，创建本地时间的0点
const height_series = api_data.map(item => {
    const dateStr = item.date.split('T')[0]; // 分离日期和时间部分
    const x = new Date(dateStr);
    const y = item.height
    return { x, y }
})

2. 配置ApexCharts使用本地时区 #

在x轴配置中添加timezone: 'local'，强制图表按本地时区渲染日期：

const heightOptions = ref({
    // ...其他配置
    xaxis: {
        type: 'datetime',
        timezone: 'local', // 新增：使用本地时区处理日期
        labels: {
            show: true,
            rotate: -45,
            formatter: function (_, timestamp, opts) {
                return opts.dateFormatter(new Date(timestamp), "dd MMM yy");
            },
        },
        tickPlacement: 'on'
    },
    // ...其他配置
})

后端辅助修复（可选） #

如果前端调整后仍有问题，可以在FastAPI接口中统一日期的时区格式，确保前后端时间基准一致：

from datetime import timezone

@app.get('/growth/')
def growth_metrics(*, session: Session = Depends(get_session)):
    metrics = session.exec(
        select(Growth).order_by(desc(Growth.check_in)).limit(30)
    ).all()

    # 将日期转换为UTC时区的ISO字符串，前端统一按UTC解析
    metrics = [{
        "date": row.check_in.astimezone(timezone.utc).isoformat(),
        "weight": row.weight, 
        'height': row.height
    } for row in metrics]

    return metrics

验证步骤 #

• 在前端控制台打印api_data，确认后端返回的日期格式是否正确
• 打印转换后的x值，检查日期是否与数据库中的实际日期一致
• 刷新页面后查看图表，确认日期范围已匹配实际数据

内容的提问来源于stack exchange，提问作者Ong K.S