Chart.js箭头键导航元素/提示框的问题与优化方案探索

我正在为Chart.js开发一项实用的基础可访问性功能：通过箭头键导航图表数据点并同步显示提示框。当前代码在单数据集折线图中可用，但存在多数据集适配困难和鼠标悬停干扰功能运行两个核心问题，以下是针对性的完善方案：

核心问题解决思路 #

1. 多数据集适配支持 #

• 新增上下箭头（ArrowUp/ArrowDown）用于切换不同数据集
• 处理数据集长度不一致的情况：切换数据集时自动将索引调整为目标数据集的有效范围内，避免索引越界
• 保留左右箭头切换同数据集内数据点的逻辑，支持循环导航

2. 鼠标悬停干扰处理 #

• 添加状态标记区分键盘导航与鼠标交互状态
• 监听图表的鼠标事件，在鼠标介入时重置键盘导航的激活状态，避免两者状态冲突

完善后的代码 #

const myChart = Chart.getChart("myChart"); // 替换为你的图表ID
let isKeyboardNavActive = false; // 标记是否处于键盘导航状态

// 键盘导航事件监听
document.addEventListener('keydown', event => {
  // 仅响应箭头键
  if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.code)) return;

  event.preventDefault(); // 阻止默认页面滚动行为
  isKeyboardNavActive = true;

  let activeElements = myChart.getActiveElements();
  // 初始化激活状态：无选中元素时默认选中第一个数据集的第一个点
  if (!activeElements.length) {
    activeElements = [{ datasetIndex: 0, index: 0 }];
  }

  const active = activeElements[0];
  let { datasetIndex, index } = active;
  const datasetCount = myChart.data.datasets.length;
  const currentDatasetLength = myChart.data.datasets[datasetIndex].data.length;

  // 左右箭头：切换同数据集内的数据点
  if (event.code === 'ArrowLeft') {
    index = index > 0 ? index - 1 : currentDatasetLength - 1;
  } else if (event.code === 'ArrowRight') {
    index = index < currentDatasetLength - 1 ? index + 1 : 0;
  } 
  // 上下箭头：切换数据集，自动适配目标数据集的有效索引
  else if (event.code === 'ArrowUp') {
    datasetIndex = datasetIndex > 0 ? datasetIndex - 1 : datasetCount - 1;
    const targetLength = myChart.data.datasets[datasetIndex].data.length;
    index = index >= targetLength ? targetLength - 1 : index;
  } else if (event.code === 'ArrowDown') {
    datasetIndex = datasetIndex < datasetCount - 1 ? datasetIndex + 1 : 0;
    const targetLength = myChart.data.datasets[datasetIndex].data.length;
    index = index >= targetLength ? targetLength - 1 : index;
  }

  // 更新激活元素与提示框
  const newActiveElement = [{ datasetIndex, index }];
  myChart.setActiveElements(newActiveElement);
  myChart.tooltip.setActiveElements(newActiveElement);
  myChart.update();
});

// 鼠标交互事件监听：解决干扰问题
myChart.canvas.addEventListener('mouseenter', () => {
  if (isKeyboardNavActive) {
    myChart.setActiveElements([]);
    myChart.tooltip.setActiveElements([]);
    myChart.update();
    isKeyboardNavActive = false;
  }
});

myChart.canvas.addEventListener('mousemove', () => {
  if (isKeyboardNavActive) {
    myChart.setActiveElements([]);
    myChart.tooltip.setActiveElements([]);
    myChart.update();
    isKeyboardNavActive = false;
  }
});

myChart.canvas.addEventListener('mouseleave', () => {
  isKeyboardNavActive = false;
});

关键优化点说明 #

• 多数据集兼容：切换数据集时自动修正索引，适配不同长度的数据集，避免报错
• 状态隔离：通过isKeyboardNavActive标记区分交互状态，鼠标介入时自动重置键盘导航状态，消除冲突
• 体验提升：阻止箭头键默认滚动行为，让导航操作更聚焦于图表
• 版本兼容：适配Chart.js 3.5.1及最新4.2.1版本的API

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