Chart.js单图表绘制不同X/Y值双折线图的轴缩放异常问题

问题根源 #

你之前的代码把X轴设为类别轴（默认类型，通过labels定义），这类轴会按索引均匀分布刻度，完全忽略数值本身的间隔。比如IST的560是第8个标签，SOLL的570是第6个标签，它们在图表上的位置只由索引决定，自然无法按实际数值比例对齐，这和Excel的数值轴逻辑完全不同。

解决方案 #

核心是把X轴改为数值轴（linear类型），同时将每个数据集的点定义为{x: 数值, y: 数值}的格式，让Chart.js基于实际X值的比例渲染，无需多X轴，单X轴就能实现两条线的正确对齐。

修改后的完整代码 #

HTML（无需改动）

<div class="chart-container" style="position: relative; height:60vh; width:40vw">
    <canvas id="myChart"></canvas>
</div>

JavaScript

// 定义两个数据集的X值数组
const istX = [350, 410, 435, 460, 485, 510, 535, 560, 585, 610, 645, 680, 705, 730, 760];
const sollX = [350, 410, 450, 490, 525, 570, 660, 690, 730, 750, 760];

const data = {
  datasets: [{
      label: 'IST',
      // 把Y值和对应X值组合成{x,y}对象
      data: istX.map((x, index) => ({
        x: x,
        y: [0, 0.043, 0.693, 0.378, 0.065, 0.090, 0.108, 0.061, 0.038, 0.172, 1.000, 0.565, 0.049, 0.065, 0.036][index]
      })),
      borderColor: 'rgba(0, 0, 255, 1)',
      yAxisID: 'y',
      cubicInterpolationMode: 'monotone',
      pointRadius: 0
    },
    {
      label: 'SOLL',
      data: sollX.map((x, index) => ({
        x: x,
        y: [0, 0.02, 0.7, 0.04, 0.1, 0.04, 1, 0.04, 0.05, 0.04, 0.04][index]
      })),
      borderColor: 'rgba(255, 99, 132, 1)',
      yAxisID: 'y',
      cubicInterpolationMode: 'monotone',
      pointRadius: 0
    }
  ]
}

const config = {
  type: 'line',
  data: data,
  options: {
    interaction: {
      intersect: false,
      mode: 'index'
    },
    scales: {
      y: {
        min: 0,
        title: {
          display: true,
          text: '响应值'
        }
      },
      x: {
        type: 'linear', // 关键：设置为数值轴
        min: 350,
        max: 760,
        title: {
          display: true,
          text: 'X轴数值'
        },
        ticks: {
          autoSkip: true,
          maxTicksLimit: 10 // 控制显示的刻度数量，避免拥挤
        }
      }
    }
  }
}

var ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, config);

关键调整说明 #

1. 数据集格式：将每个数据点改为{x, y}结构，明确绑定每个Y值对应的实际X数值，确保Chart.js能识别数值关系。
2. X轴类型：设置type: 'linear'，让X轴按数值比例分配刻度位置，和Excel的数值轴逻辑一致。
3. 移除多余X轴：单数值X轴即可满足需求，无需多X轴，避免刻度冲突。
4. Y轴优化：两个数据集Y值范围接近，共用一个Y轴更简洁，若需要独立Y轴可保留y1和y2配置，只需确保X轴为linear类型即可。

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