ChartJS温度图X轴ISO8601日期格式化及显示偏移问题咨询

问题1：日期偏移解决 #

你的日期偏移是因为ChartJS时间轴默认将UTC时间转为浏览器本地时区渲染，要强制使用UTC时间显示，需要在X轴配置中添加时区指定：
如果你使用的是ChartJS v3/v4版本，且已安装对应日期适配器（比如chartjs-adapter-date-fns、chartjs-adapter-moment），修改x轴配置如下：

const temp_options = {
  // 其他原有配置保持不变
  scales: {
    x: {
      display: true,
      type: 'time',
      // 新增适配器时区配置，强制用UTC时间解析渲染
      adapters: {
        date: {
          zone: 'utc'
        }
      },
      time: {
        unit: 'day',
        // 修改这里的格式为你需要的YYYY/MM/DD
        displayFormats: {
          day: 'yyyy/MM/dd',
        },
        // 可选：悬浮提示的日期也同步使用该格式
        tooltipFormat: 'yyyy/MM/dd'
      },
      title: {
        display: true,
        text: 'Data observations'
      }
    },
    // y轴原有配置保持不变
  }
};

问题2：日期格式修改 #

上述配置中已经把displayFormats.day的值从原来的dd MMM yy改为yyyy/MM/dd，即可实现你需要的日期显示格式。

轻量替代方案（无需额外安装日期适配器） #

如果你不想额外安装日期适配器，也可以直接在生成labels的时候提前把日期处理成指定格式，X轴改用分类类型即可，完全规避时区转换问题：

1. 修改数据源的labels生成逻辑：

const temp_data = {
  labels: this.props.weatherdataDetails.weatherdata_history.map(e => {
    // 直接从UTC时间字符串截取日期，替换分隔符为/，完全规避时区转换误差
    return e.date.split('T')[0].replace(/-/g, '/')
  }),
  // datasets原有配置保持不变
};

2. 修改X轴配置，去掉time相关配置，改为默认category类型：

const temp_options = {
  // 其他原有配置保持不变
  scales: {
    x: {
      display: true,
      title: {
        display: true,
        text: 'Data observations'
      }
    },
    // y轴原有配置保持不变
  }
};

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