Chart.js多数据集单数据值折线图实现问题求助

我来帮你搞定这个问题，你遇到的核心问题是Chart.js里数据集的data数组和labels数组的映射逻辑没匹配上。

问题原因 #

Chart.js会把每个数据集data数组里的元素，和labels数组的元素按索引一一对应。你现在每个数据集的data只有1个元素，所以所有数据集的数值都会被映射到第一个标签（January）上，自然就挤在同一列了。

要实现「January对应65、February对应86、March对应95」的效果，你需要让每个数据集的data数组长度和labels一致，只在对应月份的位置填数值，其他位置用null（或undefined）填充，这样Chart.js就会把每个数据集的点渲染到对应的月份上。

修正后的代码示例 #

const data = {
  labels: ['January', 'February', 'March'],
  datasets: [
    {
      label: 'My First dataset',
      backgroundColor: 'rgba(255,99,132,0.2)',
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1,
      hoverBackgroundColor: 'rgba(255,99,132,0.4)',
      hoverBorderColor: 'rgba(255,99,132,1)',
      data: [65, null, null] // 仅January位置有值
    },
    {
      label: 'My Second dataset',
      backgroundColor: 'rgba(54, 162, 235, 0.2)', // 换颜色方便区分不同数据集
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1,
      hoverBackgroundColor: 'rgba(54, 162, 235, 0.4)',
      hoverBorderColor: 'rgba(54, 162, 235, 1)',
      data: [null, 86, null] // 仅February位置有值
    },
    {
      label: 'My Third dataset',
      backgroundColor: 'rgba(255, 206, 86, 0.2)',
      borderColor: 'rgba(255, 206, 86, 1)',
      borderWidth: 1,
      hoverBackgroundColor: 'rgba(255, 206, 86, 0.4)',
      hoverBorderColor: 'rgba(255, 206, 86, 1)',
      data: [null, null, 95] // 仅March位置有值
    }
  ]
};

// 可选：如果需要折线连接这些分散的点，开启spanGaps选项
const options = {
  scales: {
    y: {
      beginAtZero: true
    }
  },
  spanGaps: true // 允许折线跨越空值点
};

// 初始化图表
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});

额外说明 #

• 如果你的需求只是简单的「每个月份对应一个数值」，其实可以用单个数据集实现，代码更简洁：data: [65, 86, 95]，但看你用了多个数据集，应该是需要区分不同系列，所以上面的方案更适合你。
• 用null填充空值是Chart.js的标准做法，它会自动忽略这些位置，只渲染有数值的点。

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