ApexCharts折线图数据偏移求助：日期整体后移一天

一、日期整体后移一天的根源与修复 #

核心原因 #

1. 时区解析偏差：ApexCharts的datetime类型x轴默认将YYYY-MM-DD格式日期解析为UTC时区0点，若你的本地时区为东八区（UTC+8），该时间对应本地前一天20点，图表按本地时间渲染时就会显示为前一天的日期。
2. 数组索引计算错误：代码中chartData[i][chartData[i].length - j]的索引逻辑错误——数组索引从0开始，length - j会超出有效索引范围（如数组长度为5时，j=0得到5，而最大有效索引是4），直接导致数据与日期错位。

修复方案 #

1. 修正日期解析，消除时区影响

将日期字符串转换为本地时区当天0点的时间戳，确保ApexCharts解析为正确日期：

// 把日期转为本地当天0点的时间戳
const timestamp = new Date(date).setHours(0, 0, 0, 0);
data.push([timestamp, gexp]);

2. 修正数组索引匹配逻辑

将索引计算改为chartData[i][chartData[i].length - 1 - j]，确保反转后的标签与对应数据正确匹配：

for (let j = 0; j < reversedLabels.length; j++) {
  const date = reversedLabels[j];
  // 修正索引：length-1-j 对应反转后的标签位置
  const gexp = chartData[i][chartData[i].length - 1 - j];
  // 处理日期时区问题
  const timestamp = new Date(date).setHours(0, 0, 0, 0);
  data.push([timestamp, gexp]);
}

二、guild名称与数据匹配混乱的修复 #

之前修改导致的匹配混乱，本质是破坏了guildNames[i]与chartData[i]的一一对应关系，修复时需：

• 保持外层循环i变量的逻辑不变，确保每个guildNames[i]始终对应chartData[i]的完整数据
• 仅在内层循环中处理当前chartData[i]的数据与反转标签的匹配，保证每个guild的数据数组长度与标签长度一致

完整修正后的核心代码片段 #

async function drawChart(labels, chartData, guildNames, yAxisMax) {
  const JsonExample = [];

  for (let i = 0; i < guildNames.length; i++) {
    const chartDataDict = {};
    chartDataDict.name = guildNames[i];
    const reversedLabels = labels.slice().reverse();
    const data = [];
    for (let j = 0; j < reversedLabels.length; j++) {
      const date = reversedLabels[j];
      // 修正索引计算，避免越界和错位
      const gexp = chartData[i][chartData[i].length - 1 - j];
      // 处理日期时区，转为本地当天0点的时间戳
      const timestamp = new Date(date).setHours(0, 0, 0, 0);
      data.push([timestamp, gexp]);
    }

    chartDataDict.data = data;
    JsonExample.push(chartDataDict);
  }

  // 后续颜色设置、图表初始化代码保持不变
}

验证建议 #

1. 修正后打开浏览器控制台，查看JsonExample中的日期与GEXP值对应关系，确认匹配正确
2. 刷新页面，检查ApexCharts的x轴日期显示，确认不再偏移

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