Chart.js堆叠面积折线图多数据集轴映射与x轴日期排序问题

问题根因 #

• x轴未指定正确的类型，默认的category类型只会按数据集的加载顺序拼接x值，不会自动去重、按日期排序，导致x轴重复且顺序混乱，不同数据集的x值映射错位。
• data1中第一条数据的x值存在笔误：2030*08-03中的*应为-，不符合标准日期格式，进一步干扰x轴的解析逻辑。
• 堆叠折线图的x轴需要有统一的有序维度基准，当前实现没有统一的x轴基准，每个数据集各自的x值没有对齐到同一套维度体系。

修复方案 #

这里提供无需额外引入依赖的修复方案：

1. 修正data1中的日期笔误
2. 提前收集所有数据集的x值，去重后按日期升序排列，作为全局x轴的labels
3. 显式指定x轴的类型为category，保证按预处理好的labels顺序渲染
4. 补充spanGaps: true配置，让折线自动补全缺失日期的间隔，避免折线断裂

修复后完整代码 #

var ctx = document.getElementById("myChart").getContext("2d");

const colors = {
      green: {
        fill: 'rgba(0,128,0,0.2)',
        stroke: 'green',
      },
      grey: {
        fill: 'rgba(128,128,128, 0.2)',
          stroke: 'grey',
      },
      red: {
        fill: 'rgba(255, 0, 0, 0.2)',
        stroke: 'red',
      }
};

// 修正笔误后的数据集
const data1 = [
        {x: "2030-08-03", y: 8},
        {x: "2030-08-04", y: 1},
        {x: "2030-08-08", y: 2},
        {x: "2030-08-09", y: 10},
        {x: "2030-08-10", y: 2},
        {x: "2030-08-12", y: 34} ];
const data2 = [
        {x: "2030-08-09", y: 1},
        {x: "2030-08-12", y: 12},
        {x: "2030-08-13", y: 3},
        {x: "2030-08-15", y: 3}
];
const data3 = [
        {x: "2030-08-06", y: 1},
        {x: "2030-08-09", y: 12},
        {x: "2030-08-10", y: 3},
        {x: "2030-08-12", y: 3}];

// 预处理所有x值，去重排序
const allX = [...new Set([...data1.map(d=>d.x), ...data2.map(d=>d.x), ...data3.map(d=>d.x)])]
  .sort((a,b) => new Date(a) - new Date(b));

const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    // 传入预处理好的x轴标签
    labels: allX,
    datasets: [
      {
        label: "Data1",
        fill: true,
        backgroundColor: colors.green.fill,
        pointBackgroundColor: colors.green.stroke,
        borderColor: colors.green.stroke,
        pointHighlightStroke: colors.green.stroke,
        borderCapStyle: 'butt',
        data: data1,
        // 自动补全间隔
        spanGaps: true
      },
      {
        label: "Data2",
        fill: true,
        backgroundColor: colors.grey.fill,
        pointBackgroundColor: colors.grey.stroke,
        borderColor: colors.grey.stroke,
        pointHighlightStroke: colors.grey.stroke,
        data: data2,
        spanGaps: true
      },
      {
        label: "Data3",
        fill: true,
        backgroundColor: colors.red.fill,
        pointBackgroundColor: colors.red.stroke,
        borderColor: colors.red.stroke,
        pointHighlightStroke: colors.red.stroke,
        data: data3,
        spanGaps: true
       }
    ]
  },
  options: {
    plugins: {
      responsive: true,
      legend: {
        display: true,
        position: 'bottom',
      },
      title: {
        display: true,
        text: 'Status',
        padding: {
          top: 20,
          bottom: 15
        },
        font: {
          weight: "bold",
          size: 25
        }
      }
    },
    layout: {
      padding: {
        left: 20,
        right: 0,
        top: 0,
        bottom: 25
      }
    },
    scales: {
      x: {
        type: 'category',
        ticks: {
          align: "center"
        }
      },
      y: {
        stacked: true,
        title: {
          display: true,
          text: "Count",
          font: {
            weight: "bold",
            size: 20
          }
        }
      },
    },
    parsing: {
      xAxisKey: 'x',
      yAxisKey: 'y'
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

修复后x轴会按日期升序排列无重复，所有数据集的x、y值映射完全对应，悬停查看数据点的数值也不会错位。

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