AmCharts5：点击LineSeries获取dataItem、dataContext及激活tooltip

• 1. 点击LineSeries时获取激活状态的dataItem #

  直接给LineSeries实例绑定hit事件，事件回调中通过事件对象即可直接拿到当前激活的dataItem，无需额外遍历匹配：

  // lineSeries 为已初始化的折线序列实例
  lineSeries.events.on("hit", (ev) => {
    // 当前点击激活的dataItem
    const activeDataItem = ev.target.dataItem;
    // 可直接通过dataContext获取绑定的原始业务数据
    const rawData = activeDataItem.dataContext;
    console.log("激活的折线数据项：", activeDataItem, rawData);
  });
  

• 2. 点击图表空白区域时获取对应点位的dataContext #

  给图表绘图容器绑定点击事件，通过坐标轴的坐标转换方法，定位到距离点击位置最近的数据项即可拿到对应dataContext，效果参考：
  
  实现代码：

  // chart 为已初始化的XYChart实例，xAxis为图表绑定的X轴实例
  chart.plotContainer.events.on("hit", (ev) => {
    // 计算点击位置相对于绘图区的X坐标偏移
    const offsetX = ev.point.x - chart.plotContainer.x();
    // 转换为X轴0-1区间的位置占比
    const axisPosition = xAxis.toAxisPosition(offsetX / chart.plotContainer.width());
    // 获取距离点击位置最近的序列数据项
    const targetDataItem = xAxis.getSeriesDataItem(lineSeries, axisPosition, true);
    if (targetDataItem) {
      const pointContext = targetDataItem.dataContext;
      console.log("点击位置对应的数据：", pointContext);
    }
  });
  

• 3. 鼠标悬停触发tooltip时获取其所属对象 #

  监听tooltip的shown事件，通过tooltip实例上的target属性即可直接拿到触发tooltip显示的源对象，可通过类型判断区分不同来源（序列点、坐标轴、自定义图形等），效果参考：
  
  实现代码：

  // 监听全局tooltip显示事件，也可单独给指定序列/元素的tooltip绑定事件
  chart.tooltip.events.on("shown", (ev) => {
    // 当前tooltip的所属源对象
    const owner = ev.target.target;
    // 示例：判断是否为折线序列的数据项触发的tooltip
    if (owner?.isType("DataItem") && owner.component === lineSeries) {
      console.log("折线序列触发tooltip，对应数据：", owner.dataContext);
    }
  });
  

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