如何使用Chart.js绘制带有不同标签集的双折线图？

当然可以实现！你遇到的问题是因为默认写法依赖全局共享的labels数组，而你的两个数据集x轴标签并不完全重合，导致数据错位。Chart.js支持用对象格式的数据点来解决这个问题，让每条折线可以定义自己独立的x/y对应关系，不需要共享全局标签。

解决方法示例代码 #

下面是修改后的可运行代码，核心是把每个数据集的data从纯数值数组改成包含x和y属性的对象数组：

var config = {
  type: 'line',
  data: {
    // 移除全局labels数组，不再依赖共享标签
    datasets: [{
      label: 'Chart 1',
      data: [
        {x: 1, y: 2},
        {x: 2, y: 4},
        {x: 3, y: 8},
        {x: 4, y: 16}
      ],
      borderColor: '#ff6384', // 给折线加个颜色区分
      fill: false
    }, {
      label: 'Chart 2',
      data: [
        {x: 1, y: 3},
        {x: 3, y: 4},
        {x: 4, y: 6},
        {x: 6, y: 9}
      ],
      borderColor: '#36a2eb',
      fill: false
    }]
  },
  options: {
    scales: {
      x: {
        type: 'linear', // 因为你的x值是数值类型，用线性轴更合适
        position: 'bottom'
      },
      y: {
        beginAtZero: true // 让y轴从0开始，更直观
      }
    }
  }
};

// 初始化图表（确保页面上有id为myChart的canvas元素）
var myChart = new Chart(
  document.getElementById('myChart'),
  config
);

关键说明 #

• 移除全局labels：不再需要共享标签数组，每个数据点自己定义x轴的值
• 对象式数据点：每个数据点用{x: 标签值, y: 对应数值}的格式，让每条折线完全独立管理自己的x/y对应关系
• 坐标轴配置：因为x值是数值，设置x.type: 'linear'可以让坐标轴自动适配所有x值的范围，不会出现断层或错位

这样设置后，两个折线会根据各自的x值在正确的位置绘制，Chart.js会自动处理坐标轴的刻度，完美实现你要的效果！

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