如何解决Chart.js图表中X轴顺序错乱问题

我有两组长度不同的数据集，格式均为{x: '11:59', y: 2772.33}、{x: '11:59', y: 2770.67}、{x: '12:00', y: 2772.33}这类，但图表的X轴未按正确时间顺序排列。

现有实现代码 #

var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
         datasets: [{
            data: [<?php echo $resultString1; ?>],
            borderColor: "green",
            label: "1. Tag",
            showLine: true
        },
        {
            data: [<?php echo $resultString2; ?>],
            borderColor: "blue",
            label: "2. Tag",
            showLine: true
        }],
    },
    options: {
        plugins: {
            legend: {
                display: true
            },
        },                
        responsive: true,
        maintainAspectRatio: false,
      scales: {
        x: [{
            type: 'time',
            time: {
                displayFormats: {hour: 'HH:mm'},
            },
            grid: {
                color: 'black'
            },
            ticks: {
                fontSize: 40,
                  color: 'black',
                  max: 1,
                  min: 0,
                  font: '17'
            },
        }],
        y: {
             grid: {
                color: 'black'
            },
            type: 'linear',
            position: 'left',
            ticks: {
                color: 'black',
                max: 1,
                min: 0
            },
            title: {
                display: true,
                color: 'black',
                text: 'Leistung (WATT)'
            },
        },
      },
    }
});

问题原因及修复方案 #

1. X轴刻度配置错误：当前X轴ticks里设置了max:1和min:0，这会强制覆盖时间轴的正常逻辑，只显示0-1的刻度，是排序错乱的核心原因。

   • 修复：删除X轴ticks中的max和min配置，让Chart.js自动根据数据生成合理刻度。

2. 时间格式未被正确解析：虽然X轴设置为time类型，但数据中的x是字符串格式的时间，Chart.js无法自动识别为时间对象，导致排序逻辑失效。

   • 修复：将数据中的x字符串转换为JavaScript Date对象。如果是同一天的时间，可以补全日期部分，比如new Date('2024-01-01 ' + xValue)。

3. 数据集未预排序：Chart.js不会自动对数据集内的点进行排序，若原始数据本身是乱序的，转换时间对象后仍需手动排序。

调整后的关键代码片段 #

修改X轴配置

scales: {
  x: { // 注意此处应为对象，而非数组
      type: 'time',
      time: {
          displayFormats: {hour: 'HH:mm'},
          unit: 'minute' // 指定时间单位，提升刻度精准度
      },
      grid: {
          color: 'black'
      },
      ticks: {
          fontSize: 17, // 统一字体大小，避免配置冲突
          color: 'black'
      },
  },
  // y轴配置保留原有逻辑
}

前端处理数据集时间格式与排序

// 处理第一组数据
const processedData1 = <?php echo $resultString1; ?>.map(item => ({
  x: new Date(`2024-01-01 ${item.x}`), // 补全日期，转为合法Date对象
  y: item.y
})).sort((a, b) => a.x - b.x); // 按时间升序排序

// 同理处理第二组数据
const processedData2 = <?php echo $resultString2; ?>.map(item => ({
  x: new Date(`2024-01-01 ${item.x}`),
  y: item.y
})).sort((a, b) => a.x - b.x);

// 初始化图表时使用处理后的数据集
var myChart = new Chart(ctx, {
  // ... 其他配置
  data: {
    datasets: [{
      data: processedData1,
      // ... 其他配置
    }, {
      data: processedData2,
      // ... 其他配置
    }]
  }
});

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