如何阻止RGraph样条曲线对空值进行外推？

问题场景 #

使用RGraph绘制多曲线折线图时，部分曲线开头存在空值（无早期测量数据）：

• 开启spline: true时，样条曲线会错误地将空值外推至y轴高位
• 关闭样条功能（spline: false）时，曲线能从有效数据点正常起始，但丢失了样条平滑效果

需要实现样条曲线从有效数据点开始绘制，不进行错误外推的效果。

解决方案 #

预处理原始数据，将每条曲线开头的空值替换为该曲线的第一个有效数据点值，让样条插值以有效点为起始基准，避免错误外推。

修改后的完整代码 #

// 原始数据
var rawData = [
    [0.775,1.460,2.218,2.800,3.522,5.056,8.500,14.012,17.341,19.059,15.038,8.888],
    [,0.727,2.057,4.225,5.677,7.842,10.930,14.824,18.418,19.248,14.138,9.666],
    [,0.627,2.530,5.134,8.312,12.452,17.047,20.548,22.542,22.016,15.315,9.525],
    [,,0.556,4.679,9.442,13.284,19.225,23.606,26.523,23.362,15.818,9.385],
    [,,0.506,2.998,7.891,12.243,18.559,25.529,24.443,23.574,16.200,9.291],
    [,,0.444,3.082,6.877,12.420,17.558,23.496,26.848,26.281,15.746,9.332],
    [,,0.382,2.948,6.935,11.296,17.782,23.572,23.354,24.772,16.563,9.593]
];

// 预处理数据：替换开头空值为第一个有效点
var processedData = rawData.map(curve => {
    // 找到第一个非空的有效数值
    const firstValid = curve.find(val => val !== undefined);
    // 替换开头所有空值
    return curve.map(val => val === undefined ? firstValid : val);
});

// 初始化RGraph折线图
var line = new RGraph.Line({
    id: 'cvs2',
    data: processedData,
    options: {
        textFont: 'Yantramanav',
        textSize: '8',
        textColor: '#444',
        BackgroundBarcolor1: 'white',
        BackgroundBarcolor2: 'red',
        BackgroundGridColor: 'rgba(238,238,238,1)',
        linewidth: 1,
        filled: false,
        fillstyle: ['red','blue','#0f0'],
        hmargin: 5,
        shadow: false,
        tickmarks: 'circle',
        spline: true,
        gutterLeft: 40,
        labels: ['2','4','8','16','32','64','128','256','512','1024','2048','4096'],
        colors: ['hsl(172,50%,50%)','hsl(35,50%,50%)','hsl(257,50%,50%)','hsl(120,50%,50%)','hsl(342,50%,50%)','hsl(204,50%,50%)','hsl(67,50%,50%)']
    }
}).draw();

原理说明 #

样条曲线的插值算法需要连续的数据点支撑，原始开头的空值会被算法视为无约束的端点，从而产生向y轴高位的错误外推。通过将开头空值替换为第一个有效点，相当于给样条曲线设置了明确的起始约束，让插值从有效数据点开始，既保留了样条平滑效果，又避免了错误外推。

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