在ChartJS中使用spanGaps时，如何获取被跨越的null值坐标？

ChartJS没有提供直接获取spanGaps跨越的null点推导值的公开插件API，也不存在类似ChartJSPluginAPI.deriveNulls(data)的现成方法。

当spanGaps设为true时，ChartJS会在内部对null数据点进行插值计算以绘制连续曲线，但这些推导值属于内部临时计算数据，并未暴露给外部开发者直接调用的接口。

如果需要获取这些推导值，有两种可行方案：

• 自行实现插值逻辑：模拟ChartJS默认的线性插值规则（spanGaps默认使用线性插值连接非null点），遍历数据数组，找到每个null点前后的有效数据点，通过线性比例计算推导值。
• 从图表内部数据提取：通过插件钩子（如afterLayout、afterUpdate）访问图表实例的内部元数据（如chart.data.datasets[0]._meta），从中获取插值后的点坐标并反向推导数值。但这种方式依赖ChartJS的内部实现，不同版本可能存在差异，稳定性较差。

自行实现线性插值的示例代码 #

function deriveNulls(data) {
  const filledData = [...data];
  for (let i = 0; i < filledData.length; i++) {
    if (filledData[i] !== null) continue;

    // 查找前一个有效数据点
    let prevIndex = i - 1;
    while (prevIndex >= 0 && filledData[prevIndex] === null) prevIndex--;
    // 查找后一个有效数据点
    let nextIndex = i + 1;
    while (nextIndex < filledData.length && filledData[nextIndex] === null) nextIndex++;

    // 仅当前后都有有效数据时计算插值
    if (prevIndex >= 0 && nextIndex < filledData.length) {
      const prevValue = filledData[prevIndex];
      const nextValue = filledData[nextIndex];
      const intervalRatio = (i - prevIndex) / (nextIndex - prevIndex);
      filledData[i] = prevValue + (nextValue - prevValue) * intervalRatio;
    }
  }
  return filledData;
}

// 使用示例
const originalData = [7, null, 11, null, 5, null, 8, null, 3, null, 7];
const result = deriveNulls(originalData);
console.log(result); // 输出：[7, 8, 11, 8, 5, 6.5, 8, 5.5, 3, 5, 7]

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