Chart.js多折线折线图如何为不同折线设置独立X轴坐标点

完全可以在不使用Scatter chart的前提下，实现多折线各自绑定独立X轴坐标点的效果，适配你现有的数组传参逻辑。

你之前的参考代码出现第二组折线X坐标错位的核心原因是：全局配置的labels字段只绑定了第一组数据的X值，所有数据集默认会按照全局标签的索引顺序匹配Y值，无法识别第二组数据自己的X坐标。

不需要切换图表类型，普通line类型折线图原生支持单数据集独立传入坐标点：

1. 移除全局labels配置，避免强制按统一索引匹配点位
2. 给X轴配置线性数值类型，让Chart.js按X值的实际数值计算点位位置，而非按类目顺序排列
3. 每个数据集的data字段传入{x: X坐标值, y: Y坐标值}格式的数组，即可让每条折线使用独立的X坐标。不需要重构现有动态生成数组的逻辑，只需要加1行映射代码，把分开存储的x、y数组合成上述格式即可。

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>

<script>
// 原有动态生成的数组格式完全保留
var xValues1 = [1,4,7,9];
var yValues1 = [10,20,35,40];
var xValues2 = [2,3,6,9];
var yValues2 = [15,23,30,35];

// 仅需加一步映射，把x、y数组合成坐标点对象数组，不影响原有传参逻辑
var dataset1 = xValues1.map((x, idx) => ({x: x, y: yValues1[idx]}));
var dataset2 = xValues2.map((x, idx) => ({x: x, y: yValues2[idx]}));

new Chart("myChart", {
  type: "line",
  data: {
    // 移除全局labels配置
    datasets: [{
      fill: false,
      backgroundColor: "rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.8)",
      data: dataset1
    },
    {
      fill: false,
      backgroundColor: "rgba(255,0,0,1.0)",
      borderColor: "rgba(255,0,0,0.8)",
      data: dataset2
    }
    ]
  },
  options: {
    legend: {display: false},
    scales: {
      // 配置X轴为线性数值轴
      xAxes: [{
        type: 'linear',
        position: 'bottom'
      }],
      yAxes: [{ticks: {min: 0, max:50}}],
    }
  }
});
</script>

</body>
</html>

• 全程保持图表type为line，不需要切换为scatter，完全符合场景要求
• 映射逻辑非常轻量，不会影响原有动态生成数据的流程，只需要在传入Chart前做一次格式转换即可
• 两条折线的点位会严格按照各自的X值落在对应坐标位置，不会出现索引错位的问题
• 可以支持任意多条折线，每条折线的X坐标点数量、取值都不需要和其他折线保持一致

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