如何通过delete键删除、enter键编辑Highstock标注

直接通过监听图表容器的键盘事件，结合Highstock内置的标注操作API即可实现需求，和原有点击按钮的逻辑完全一致，不需要修改组件源码。

完整实现代码 #

// 1. 初始化图表后拿到图表实例，此处假设你的图表实例变量为chart，容器DOM ID为container
const chartContainer = document.getElementById('container')
// 2. 给容器设置tabindex属性，保证容器可以获得焦点以接收键盘事件
chartContainer.setAttribute('tabindex', '0')
// 3. 绑定键盘按下事件
chartContainer.addEventListener('keydown', function (e) {
  // 查找当前处于选中激活状态的标注
  const activeAnnotation = chart.annotations.find(anno => anno.active)
  // 没有选中的标注直接跳过
  if (!activeAnnotation) return

  // 处理Delete按键删除标注
  if (e.key === 'Delete' || e.keyCode === 46) {
    e.preventDefault()
    activeAnnotation.remove()
  }

  // 处理Enter按键进入标注编辑状态
  if (e.key === 'Enter' || e.keyCode === 13) {
    e.preventDefault()
    activeAnnotation.startEditing()
  }
})

注意事项 #

• 必须给图表容器设置tabindex属性，否则容器无法获取键盘焦点，绑定的事件不会触发
• 如果使用框架封装的Highstock组件（如highcharts-react-official、vue-highcharts等），只需要在组件挂载完成的生命周期钩子中拿到chart实例，再执行上述绑定逻辑即可
• 上述逻辑调用的是Highstock原生API，和点击删除、编辑按钮的触发逻辑完全一致，不会产生额外的兼容问题

操作参考图 #

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