Chart.js多堆叠Y轴图表X轴标签被单数据集覆盖问题求助

1. 预计算完整的X轴值域 #

先收集所有数据集的X值，去重后按时间顺序排序，得到覆盖全部数据的完整时间线：

// 假设你的图表数据结构如下
const chartData = {
  datasets: [
    { label: 'title', data: [{ x: '2024-05-01', y: 10 }] },
    { label: 'dataset1', data: [{ x: '2024-05-02', y: 20 }, { x: '2024-05-03', y: 30 }] },
    // 其他数据集...
  ]
};

// 提取所有X值并去重排序
const allXPoints = [].concat(...chartData.datasets.map(ds => ds.data.map(item => item.x)));
const uniqueSortedX = [...new Set(allXPoints)].sort((a, b) => new Date(a) - new Date(b));

2. 配置X轴强制固定范围 #

在Chart.js配置中，给X轴设置固定的min和max值，覆盖默认的自动计算逻辑：

const chart = new Chart(document.getElementById('myChart'), {
  type: 'line', // 替换为你实际使用的图表类型
  data: chartData,
  options: {
    scales: {
      x: {
        type: 'time', // 时间轴类型，根据数据格式调整
        time: {
          unit: 'day', // 时间单位按需设置
          displayFormats: { day: 'YYYY-MM-DD' }
        },
        // 强制X轴范围覆盖所有数据点
        min: uniqueSortedX[0],
        max: uniqueSortedX[uniqueSortedX.length - 1],
        ticks: {
          autoSkip: true, // 自动跳过密集刻度避免重叠，可按需关闭
          maxRotation: 45
        }
      },
      // 堆叠Y轴配置示例
      y: { stacked: true },
      y1: { stacked: true, position: 'right' }
    }
  }
});

3. 动态数据场景的处理 #

如果数据集是动态添加/修改的，需要在数据更新后重新计算值域并更新图表：

function updateXAxisRange() {
  const allXPoints = [].concat(...chart.data.datasets.map(ds => ds.data.map(item => item.x)));
  const uniqueSortedX = [...new Set(allXPoints)].sort((a, b) => new Date(a) - new Date(b));
  
  chart.options.scales.x.min = uniqueSortedX[0];
  chart.options.scales.x.max = uniqueSortedX[uniqueSortedX.length - 1];
  chart.update();
}

// 调用示例：添加新数据集后执行
chart.data.datasets.push(newDataset);
updateXAxisRange();

关键原理 #

Chart.js默认会根据当前可见数据集自动计算X轴范围，导致单个可见数据集时X轴被压缩。通过显式设置min和max，强制X轴范围覆盖所有数据集的X值，不受数据集可见性影响。若X轴为线性/类别类型，只需修改对应type，并将min/max设为所有X值的最小/最大值即可。

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