ChartJS图表首尾数据点间出现多余连线问题求助

嘿，这个问题我之前在项目里也碰到过！看你截图里的那条多余连线，大概率是Chart.js时间轴（time scale）的默认配置在搞鬼——尤其是你用了type: 'time'的x轴时，很容易出现这种首尾莫名连线的情况。

最直接的修复方案：关闭x轴的boundaryGap #

默认情况下，Chart.js的时间轴会开启boundaryGap: true，这会在图表首尾额外留出一段空白。有时候这个空白的计算逻辑会把最后一个数据点的“延伸”位置误判成第一个点的位置，从而画出多余的连线。

只需要在你的x轴配置里加上boundaryGap: false即可解决：

xAxes: [{
  type: 'time',
  autoSkip: true,
  time: {
    unit: 'week',
    stepSize: 1
  },
  display: true,
  boundaryGap: false // 新增这一行，关闭首尾间隙
}]

额外的保险措施：确保数据严格按时间排序 #

虽然你说数据源没问题，但还是建议你确认日期数组和对应的数据集都是严格按时间升序排列的。有时候日期字符串的解析可能有隐藏的顺序问题（比如某些格式的日期被当成字符串而非时间处理），可以在传入Chart前手动排序：

// 先把日期和对应数据配对，再按日期排序
const sortedPairs = dates.map((date, index) => ({
  date,
  total: total[index],
  passed: passed[index],
  fail: fail[index],
  lsf_fail: lsf_fail[index]
})).sort((a, b) => new Date(a.date) - new Date(b.date));

// 重新拆分出排序后的数组
const sortedDates = sortedPairs.map(p => p.date);
const sortedTotal = sortedPairs.map(p => p.total);
const sortedPassed = sortedPairs.map(p => p.passed);
const sortedFail = sortedPairs.map(p => p.fail);
const sortedLsfFail = sortedPairs.map(p => p.lsf_fail);

修改后的完整配置代码 #

把上面的处理逻辑和修复后的配置结合，最终代码如下：

// 先处理数据排序（可选但推荐）
const sortedPairs = dates.map((date, index) => ({
  date,
  total: total[index],
  passed: passed[index],
  fail: fail[index],
  lsf_fail: lsf_fail[index]
})).sort((a, b) => new Date(a.date) - new Date(b.date));

const sortedDates = sortedPairs.map(p => p.date);
const sortedTotal = sortedPairs.map(p => p.total);
const sortedPassed = sortedPairs.map(p => p.passed);
const sortedFail = sortedPairs.map(p => p.fail);
const sortedLsfFail = sortedPairs.map(p => p.lsf_fail);

this.chart = new Chart('canvas', { 
  type: 'line', 
  data: { 
    labels: sortedDates, 
    datasets: [ 
      { data: sortedTotal, borderColor: '#743cba', fill: false, label : 'Total Cases' }, 
      { data: sortedPassed, borderColor: '#3cba9f', fill: false, label : 'Passed' }, 
      { data: sortedFail, borderColor: '#ba3c3c', fill: false, label: 'Failed' }, 
      { data: sortedLsfFail, borderColor: '#00cbff', fill: false, label: 'LSF (Failure)' }
    ] 
  }, 
  options: { 
    elements: { 
      line: { 
        tension: 0, 
      } 
    }, 
    scales: { 
      yAxes: [{ display: true }], 
      xAxes: [{ 
        type: 'time', 
        autoSkip: true, 
        time: { unit: 'week', stepSize: 1 }, 
        display: true,
        boundaryGap: false // 关键修复
      }] 
    }, 
    title: { 
      display: true, 
      text: 'SDOC LSF Metrics', 
    } 
  } 
});

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