Chart.JS v3.x时间笛卡尔轴毫秒级时间戳无法正确解析问题

你代码中返回的是秒级Unix时间戳，不符合Chart.js时间轴要求的毫秒级时间戳规范：你数据中x字段的10位数值（如1625443200）换算为毫秒仅为纪元开始后18天左右，因此所有数据点都会集中在x轴的起始位置。

Chart.js官方文档明确要求：设置parsing: false时，必须传入自1970年1月1日UTC零点起算的毫秒级时间戳。

方案1：保持高性能配置（推荐） #

保留parsing: false配置，仅需要在数据赋值前将所有x字段的时间戳转换为毫秒级即可，修改后的JS代码如下：

document.addEventListener("DOMContentLoaded", function() {
  var weeklyHistoryChartEl = document.getElementById('weeklyHistory').getContext('2d');
  var weeklyHistoryChart = new Chart(weeklyHistoryChartEl, { 
      type: 'line',
      scales: {
        x: {
          type: 'time',
          parsing: false
        }
      }
  });
  let rawData = JSON.parse('{"datasets":[{"data":[{"x":1625443200,"y":11.74},{"x":1626048000,"y":12.43},{"x":1626652800,"y":34.18}],"label":"Hike","hidden":true},{"data":[{"x":1624233600,"y":5.27},{"x":1630281600,"y":7.32}],"label":"Kayaking","hidden":true},{"data":[{"x":1626652800,"y":17.99}],"label":"NordicSki","hidden":true},{"data":[{"x":1623024000,"y":9.98},{"x":1623628800,"y":15.97},{"x":1624233600,"y":29.07},{"x":1624838400,"y":57.26},{"x":1625443200,"y":15.87},{"x":1627257600,"y":40.73},{"x":1627862400,"y":29.87},{"x":1628467200,"y":58.87},{"x":1629072000,"y":7.62},{"x":1629676800,"y":21.52},{"x":1630281600,"y":6.03}],"label":"Ride","hidden":true},{"data":[{"x":1628467200,"y":0}],"label":"RockClimbing","hidden":true},{"data":[{"x":1623628800,"y":92.45},{"x":1624233600,"y":31.24},{"x":1624838400,"y":23.81},{"x":1625443200,"y":9.39},{"x":1626048000,"y":40.94},{"x":1626652800,"y":12.84},{"x":1627257600,"y":33.59},{"x":1627862400,"y":30.97},{"x":1628467200,"y":31.88},{"x":1629072000,"y":27.88},{"x":1629676800,"y":47.23},{"x":1630281600,"y":48.1}],"label":"Run","hidden":false},{"data":[{"x":1627862400,"y":30.2},{"x":1628467200,"y":36.24},{"x":1629676800,"y":85.58},{"x":1630281600,"y":52.81}],"label":"VirtualRide","hidden":true},{"data":[{"x":1623024000,"y":6.78},{"x":1626048000,"y":5.92}],"label":"Walk","hidden":true},{"data":[{"x":1623628800,"y":0},{"x":1628467200,"y":0}],"label":"Yoga","hidden":true}]}');
  // 转换秒级时间戳为毫秒级
  rawData.datasets.forEach(dataset => {
    dataset.data.forEach(item => {
      item.x = item.x * 1000;
    })
  })
  weeklyHistoryChart.data = rawData;
  weeklyHistoryChart.update();
});

方案2：无需修改原始数据 #

移除parsing: false配置，让日期适配器自动识别并转换秒级时间戳即可，无需额外调整其他代码。

你当前引入的date-fns版本为v1.30.1，部分新版chartjs-adapter-date-fns对date-fns的最低版本要求为v2.0.0，若转换时间戳后仍有适配问题，可将date-fns的引入地址替换为v2以上版本即可。

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