折线图双X轴叠加实现同期营收与利润数据对比问题排查

当前问题出在你用了两个独立的x轴（x和x1），导致两组数据在图表上各自占据一段x轴空间，无法对齐叠加。要实现同期数据对比，需要让所有数据集共享同一个x轴，并将过去的数据与当前数据按顺序一一对应到相同的刻度位置。

修改后的完整代码： #

let startGraph = function() {
  let canvas = document.getElementById('chart');
  // 定义同期数据的对应标签（可选，用于x轴显示）
  const periodLabels = ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5'];
  
  let chart = new Chart(canvas.getContext('2d'), {
    type: 'line',
    data: {
      labels: periodLabels, // 统一x轴标签
      datasets: [{
          label: 'Revenue',
          data: [250, 488, 358, 255, 895], // 按顺序排列的数组
          borderColor: '#ff6384',
        },
        {
          label: 'Profit',
          data: [125, 156, 195, 98, 466],
          borderColor: '#36a2eb',
        },
        {
          label: 'Past Revenue',
          data: [280, 456, 665, 288, 499], // 与当前数据一一对应
          borderColor: '#fa829b',
        },
        {
          label: 'Past Profit',
          data: [125, 198, 265, 101, 221],
          borderColor: '#76c1f5',
        }
      ]
    },
    options: {
      elements: {
        point: {
          radius: 0,
          hoverRadius: 0,
          hitRadius: 3,
        },
        line: {
          borderWidth: 2,
        },
      },
      responsive: true,
      maintainAspectRatio: false,
      interaction: {
        intersect: false,
        mode: 'index', // 保持tooltip同步显示同期所有数据
      },
      stacked: false,
      scales: {
        y: {
          ticks: {
            display: true,
            beginAtZero: true,
          }
        },
        x: {
          position: 'bottom',
          // 如果不需要显示标签可以设为false，这里保留用于标识同期天数
          ticks: {
            display: true,
          },
        },
        // 移除多余的x1轴
      },
      plugins: {
        legend: {
          display: true,
          position: 'bottom',
          labels: {
            boxWidth: 8,
            boxHeight: 8,
            useBorderRadius: true,
            borderRadius: 3,
            usePointStyle: false,
            pointStyleWidth: 0,
            padding: 7,
            font: {
              size: 11
            }
          }
        },
      },
    }
  });
}

关键修改点： #

• 统一x轴：移除了x1轴配置，所有数据集共用同一个x轴，确保数据对齐。
• 数据格式转换：将原来以日期为键的对象数据，改成按顺序排列的数组，让Past数据的每个位置与当前数据的对应日期一一匹配。
• x轴标签优化：添加了统一的labels数组，用于标识同期的天数（如果不需要显示可以隐藏ticks）。
• 保留tooltip功能：维持interaction.mode: 'index'，hover时依然能同步显示四个数据集的同期数据。

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