ChartJS v3时间轴去除X轴非工作时间间隙问题求助

你遇到的核心问题是：ticks.callback只是隐藏了非工作时间的刻度标签，但时间轴的底层计算依然基于完整的时间范围——非工作时间的区间仍然被算入轴的总长度，所以会出现间隙。autoskip和spangaps都不改变轴的范围，自然解决不了这个问题。

给你两个实用的解决方案：

方案一：预处理数据+类别轴（推荐，简单直接） #

直接过滤掉非工作时间的数据点，然后把X轴改成类别轴，有效数据会自动紧凑排列：

// 1. 过滤工作时间数据（示例：保留9:00-18:00的数据）
const filteredData = rawData.filter(item => {
  const hour = new Date(item.timestamp).getHours();
  return hour >= 9 && hour < 18;
});

// 2. 配置Chart.js
const chartConfig = {
  type: 'line',
  data: {
    labels: filteredData.map(item => item.timestamp),
    datasets: [{
      label: '业务数据',
      data: filteredData.map(item => item.value),
      borderColor: '#36A2EB',
      fill: false
    }]
  },
  options: {
    scales: {
      x: {
        type: 'category', // 切换为类别轴，取消时间轴的连续计算
        ticks: {
          // 按需格式化刻度文本
          callback: (val) => new Date(val).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
        }
      }
    }
  }
};

方案二：保留时间轴的分段处理（适合需要严格时间比例的场景） #

如果必须保留工作时间内的时间比例，同时跳过非工作时间的轴空间，可以把每天的工作时间数据拆成独立数据集，再通过自定义逻辑控制轴的显示范围。示例思路如下：

// 按天拆分工作时间数据
const dailyWorkData = {
  '2024-05-20': [{time: '2024-05-20 09:00', value:10}, {time: '2024-05-20 10:00', value:18}, ...],
  '2024-05-21': [{time: '2024-05-21 09:30', value:15}, {time: '2024-05-21 14:00', value:22}, ...]
};

// 生成多数据集
const datasets = Object.keys(dailyWorkData).map(date => ({
  label: date,
  data: dailyWorkData[date],
  borderColor: '#36A2EB',
  fill: false,
  spanGaps: true
}));

// 配置轴：需要借助自定义插件或扩展，让X轴只显示每个数据集对应的工作时间范围
// （注：原生Chart.js不支持直接跳过轴区间，此方案实现成本较高，仅在必须保留时间比例时使用）

优先选择方案一，大部分业务场景下足够满足需求，实现成本低，效果直接。

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