如何用ChartJS对首尾缺失数据的折线图进行外推？

核心思路 #

利用ChartJS的自定义插件，在图表绘制阶段动态修改折线的绘制路径，全程不修改原始数据系列，仅在视觉层面完成外推效果，彻底避免混淆用户。

方案1：常量值外推（首尾延伸至图表边界） #

将折线首尾分别以第一个有效数据点的y值、最后一个有效数据点的y值，延伸至图表的左右x轴边界，适合数据趋势平缓的场景。

实现代码 #

const constantExtrapolationPlugin = {
  afterDatasetDraw(chart, args, options) {
    const ctx = chart.ctx;
    const dataset = args.dataset;
    const meta = dataset._meta[chart._activeDatasetIndex];
    const validPoints = meta.data.filter(point => !isNaN(point.parsed.y));

    if (validPoints.length < 1) return; // 无有效数据直接跳过

    ctx.save();
    ctx.strokeStyle = dataset.borderColor;
    ctx.lineWidth = dataset.borderWidth;
    ctx.setLineDash(dataset.borderDash || []);

    // 头部外推：从x轴最小值到第一个有效点
    const firstValidPoint = validPoints[0];
    const chartMinX = chart.scales.x.min;
    const startExtrapolate = {
      x: chart.scales.x.getPixelForValue(chartMinX),
      y: firstValidPoint.y
    };
    ctx.beginPath();
    ctx.moveTo(startExtrapolate.x, startExtrapolate.y);
    ctx.lineTo(firstValidPoint.x, firstValidPoint.y);
    ctx.stroke();

    // 尾部外推：从最后一个有效点到x轴最大值
    const lastValidPoint = validPoints[validPoints.length - 1];
    const chartMaxX = chart.scales.x.max;
    const endExtrapolate = {
      x: chart.scales.x.getPixelForValue(chartMaxX),
      y: lastValidPoint.y
    };
    ctx.beginPath();
    ctx.moveTo(lastValidPoint.x, lastValidPoint.y);
    ctx.lineTo(endExtrapolate.x, endExtrapolate.y);
    ctx.stroke();

    ctx.restore();
  }
};

// 初始化图表时启用插件
new Chart(document.getElementById('myChart'), {
  type: 'line',
  plugins: [constantExtrapolationPlugin],
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: '红线',
      data: [null, 20, 30, 40, 50, null],
      borderColor: 'red',
      spanGaps: true, // 保留内部缺失数据的连接逻辑
      fill: false
    }]
  },
  options: {
    scales: {
      x: {
        min: 'Jan',
        max: 'Jun'
      }
    }
  }
});

方案2：线性数学外推（基于斜率延伸） #

通过计算首尾有效数据点的相邻点斜率，线性外推至图表边界，更贴合数据的趋势走向，适合有明确增长/下降趋势的数据集。

实现代码 #

const linearExtrapolationPlugin = {
  afterDatasetDraw(chart, args, options) {
    const ctx = chart.ctx;
    const dataset = args.dataset;
    const meta = dataset._meta[chart._activeDatasetIndex];
    const validPoints = meta.data.filter(point => !isNaN(point.parsed.y));

    if (validPoints.length < 2) return; // 至少需要2个点计算斜率

    ctx.save();
    ctx.strokeStyle = dataset.borderColor;
    ctx.lineWidth = dataset.borderWidth;
    ctx.setLineDash(dataset.borderDash || []);

    // 头部线性外推：用前两个有效点计算斜率，延伸到x轴最小值
    const pointA = validPoints[0];
    const pointB = validPoints[1];
    const startSlope = (pointB.parsed.y - pointA.parsed.y) / (pointB.parsed.x - pointA.parsed.x);
    const chartMinX = chart.scales.x.min;
    const extrapolateYStart = pointA.parsed.y + startSlope * (chartMinX - pointA.parsed.x);
    const startPixel = {
      x: chart.scales.x.getPixelForValue(chartMinX),
      y: chart.scales.y.getPixelForValue(extrapolateYStart)
    };
    ctx.beginPath();
    ctx.moveTo(startPixel.x, startPixel.y);
    ctx.lineTo(pointA.x, pointA.y);
    ctx.stroke();

    // 尾部线性外推：用后两个有效点计算斜率，延伸到x轴最大值
    const pointY = validPoints[validPoints.length - 2];
    const pointZ = validPoints[validPoints.length - 1];
    const endSlope = (pointZ.parsed.y - pointY.parsed.y) / (pointZ.parsed.x - pointY.parsed.x);
    const chartMaxX = chart.scales.x.max;
    const extrapolateYEnd = pointZ.parsed.y + endSlope * (chartMaxX - pointZ.parsed.x);
    const endPixel = {
      x: chart.scales.x.getPixelForValue(chartMaxX),
      y: chart.scales.y.getPixelForValue(extrapolateYEnd)
    };
    ctx.beginPath();
    ctx.moveTo(pointZ.x, pointZ.y);
    ctx.lineTo(endPixel.x, endPixel.y);
    ctx.stroke();

    ctx.restore();
  }
};

// 初始化图表时启用插件
new Chart(document.getElementById('myChart'), {
  type: 'line',
  plugins: [linearExtrapolationPlugin],
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: '红线',
      data: [null, 20, 30, 40, 50, null],
      borderColor: 'red',
      spanGaps: true, // 保留内部缺失数据的连接逻辑
      fill: false
    }]
  },
  options: {
    scales: {
      x: {
        min: 'Jan',
        max: 'Jun'
      }
    }
  }
});

关键注意事项 #

• 所有外推逻辑仅作用于绘制阶段，不会修改原始data数组，完全避免用户混淆真实数据与外推内容。
• 可通过扩展插件的配置项，为不同数据集指定不同外推策略（比如部分用常量、部分用线性）。
• 若x轴为时间轴，只需确保chart.scales.x.min和chart.scales.x.max配置正确，插件会自动完成像素值转换适配。

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