Chart.js图表中如何获取不在数据集内的指定x对应的y值？

以下方案均适配2.9.3版本，可直接在Vue项目中使用：

方案1：基于原始数据集计算（最稳定，无版本兼容问题） #

不需要依赖Chart.js实例，直接处理绑定到图表的原始数据即可，性能最高。

• 如果你的数据是离散散点，只需匹配完全相等的x值，代码如下：

// 你存在Vue实例中的原始数据集
const dataset = [
  { x: 5, y: 10 },
  { x: 10, y: 15 },
  { x: 20, y: 25 }
]
const targetX = 13
// 直接匹配x值相等的点
const targetPoint = dataset.find(item => item.x === targetX)
const targetY = targetPoint ? targetPoint.y : null // 匹配不到返回null

• 如果你的数据是连续折线/线性分布的散点，需要做线性插值计算：

const dataset = [
  { x: 5, y: 10 },
  { x: 10, y: 15 },
  { x: 20, y: 25 }
]
const targetX = 13
// 1. 按x值升序排序，避免原始数据乱序
const sortedData = [...dataset].sort((a, b) => a.x - b.x)
// 2. 处理x值超出数据范围的边界情况
if (targetX < sortedData[0].x || targetX > sortedData[sortedData.length - 1].x) {
  console.log('目标x值超出数据范围')
  return
}
// 3. 查找目标x值相邻的两个数据点
let leftPoint = sortedData[0]
let rightPoint = sortedData[sortedData.length - 1]
for (let i = 0; i < sortedData.length - 1; i++) {
  if (sortedData[i].x <= targetX && sortedData[i+1].x >= targetX) {
    leftPoint = sortedData[i]
    rightPoint = sortedData[i+1]
    break
  }
}
// 4. 线性插值计算对应y值
const ratio = (targetX - leftPoint.x) / (rightPoint.x - leftPoint.x)
const targetY = leftPoint.y + ratio * (rightPoint.y - leftPoint.y)
// 代入示例数据计算结果为18

方案2：从Chart.js实例读取数据计算 #

如果需要基于图表实际渲染的数值计算（如有数据过滤、坐标轴缩放的场景），可以先从Chart.js 2.9.3实例中拿到渲染数据集，再按方案1的逻辑计算：

// 假设你初始化图表时将实例存在了Vue实例的chartInstance属性中
const dataset = this.chartInstance.data.datasets[0].data // 按需修改对应的数据集索引
// 后续匹配/插值逻辑和方案1完全一致

注：Chart.js 2.9.3没有内置的按x值查询点的API，拿到数据集后仍需自行处理计算

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