Chart.js使用chartjs-plugin-zoom缩放后如何获取可见数据点

问题排查与修复方案 #

1. 回调参数结构修正 #

chart.data返回undefined的核心原因为不同版本chartjs-plugin-zoom的回调参数结构存在差异，修正参数获取逻辑即可：

function getVisibleValues(event) {
  // 兼容不同版本的chart对象获取逻辑
  const chart = event.chart || event;
  const xScale = chart.scales.x;
}

2. 散点图可见数据过滤逻辑修正 #

minIndex、maxIndex是类目型（category）x轴的专属属性，你当前使用的是散点图，x轴为数值线性轴，不存在这两个属性，需要根据当前x轴可视范围手动过滤数据：

function getVisibleValues(event) {
  const chart = event.chart || event;
  const xScale = chart.scales.x;
  // 获取当前x轴可视范围的上下限
  const xMin = xScale.min;
  const xMax = xScale.max;
  // 过滤出x值落在可视范围内的所有数据点
  const visibleData = chart.data.datasets[0].data.filter(point => {
    return point.x >= xMin && point.x <= xMax;
  });
  // 此处可处理你拿到的可见数据visibleData
  console.log('当前可见数据：', visibleData);
}

可选性能优化 #

如果你的源数据是按x值升序排列的，可以用二分查找替代遍历过滤，大幅提升大数据量下的执行效率：

// 图表初始化完成后先对数据集按x值排序（仅执行一次即可）
chart.data.datasets[0].data.sort((a, b) => a.x - b.x);

// 缩放回调中用二分查找定位边界索引
function getVisibleValues(event) {
  const chart = event.chart || event;
  const xScale = chart.scales.x;
  const allData = chart.data.datasets[0].data;
  // 查找左边界索引
  let left = 0, right = allData.length;
  while (left < right) {
    const mid = (left + right) >> 1;
    allData[mid].x >= xScale.min ? right = mid : left = mid + 1;
  }
  const minIndex = left;
  // 查找右边界索引
  left = 0; right = allData.length;
  while (left < right) {
    const mid = (left + right) >> 1;
    allData[mid].x > xScale.max ? right = mid : left = mid + 1;
  }
  const maxIndex = left - 1;
  const visibleData = allData.slice(minIndex, maxIndex + 1);
  console.log('当前可见数据：', visibleData);
}

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