Chart.js折线中途终止，能否将线条延伸至图表边缘？

要让折线延伸到图表边缘，核心是把数据集开头和结尾的null替换成最近的有效数值，这样Chart.js就会绘制到图表的边界刻度点上。

• 先写一个工具函数处理数据集：

function fillEdgeNulls(data) {
  // 填充开头的null为第一个有效数值
  const firstValid = data.find(val => val !== null);
  if (firstValid !== undefined) {
    for (let i = 0; i < data.length; i++) {
      if (data[i] !== null) break;
      data[i] = firstValid;
    }
  }
  // 填充结尾的null为最后一个有效数值
  const lastValid = data.findLast(val => val !== null);
  if (lastValid !== undefined) {
    for (let i = data.length - 1; i >= 0; i--) {
      if (data[i] !== null) break;
      data[i] = lastValid;
    }
  }
  return data;
}

• 处理你的数据集后再传入Chart配置：

// 原数据集
const rawData = [3, 4, null, null, 120, 89, null, null, 10, 9, null, null];
// 复制原数组避免修改源数据，再处理
const processedData = fillEdgeNulls([...rawData]);

// 初始化图表
const myChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    datasets: [{
      label: '示例数据',
      data: processedData,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  }
});

原理很简单：Chart.js遇到null会中断折线，把边缘的null替换成最近的有效值后，折线就能连续绘制到图表的第一个和最后一个刻度点，也就是视觉上的边缘位置。

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