Chart.js折线图如何添加从第一条线结束位置起始的第二条折线

除了你已经知道的手动填充null值的方案，还有以下3种常用实现思路：

• 使用对象格式数据集+parsing配置
  不需要手动补全前序null值，直接为第二个数据集的每个数据点绑定对应x轴标签即可，是分类x轴场景下最便捷的方案，示例代码如下：

  type: "line",
  data: {
    labels: ["January","February","March","April","May","June","July","August"],
    datasets: [
      {
        label: "我的第一个数据集",
        data: [4,5,6,7,8],
        fill: false,
        borderColor: "rgb(75, 192, 192)",
        tension: 0.3,
      },
      { 
        label: "我的第二个数据集",
        data: [
          {x: "June", y: 9},
          {x: "July", y: 10},
          {x: "August", y: 11}
        ],
        parsing: {
          xAxisKey: 'x',
          yAxisKey: 'y'
        },
        fill: false,
        borderColor: "rgb(255, 99, 132)",
        tension: 0.3,
      }
    ]
  }
  

• 动态自动补全null值
  适合数据动态生成的场景，不需要手动计算需要补的null数量，通过代码自动拼接即可，示例逻辑如下：

  // 第一条数据集的有效数据长度
  const firstDataLen = firstDataset.data.length;
  // 第二条折线的原始数据
  const secondRawData = [9,10,11];
  // 自动拼接前序null，生成最终数据集
  const secondFinalData = new Array(firstDataLen).fill(null).concat(secondRawData);
  

• 使用数值型/时间型x轴
  如果你的x轴是数值或者时间序列，可以直接给每个数据点指定x轴坐标值，不需要依赖预定义的labels，绘制时会自动对齐位置：

  type: "line",
  data: {
    datasets: [
      {
        label: "我的第一个数据集",
        // x值1-5对应1-5月
        data: [{x:1,y:4},{x:2,y:5},{x:3,y:6},{x:4,y:7},{x:5,y:8}],
        fill: false,
        borderColor: "rgb(75, 192, 192)",
        tension: 0.3,
      },
      { 
        label: "我的第二个数据集",
        // x值从6开始对应6月，自动对齐位置
        data: [{x:6,y:9},{x:7,y:10},{x:8,y:11}],
        fill: false,
        borderColor: "rgb(255, 99, 132)",
        tension: 0.3,
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'linear',
        // 自定义刻度标签显示为月份
        ticks: {
          callback: function(value) {
            const months = ["January","February","March","April","May","June","July","August"];
            return months[value - 1];
          }
        }
      }
    }
  }
  

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