如何为amCharts 5中的LineSeries添加mouseover鼠标悬停事件

原有代码失效原因 #

• 属性名错误：amCharts 5 控制元素交互开关的属性为interactive，不存在interactionsEnabled这个配置
• 命中区域过窄：默认折线交互命中范围与实际显示线宽一致（通常仅1-2px），鼠标极难精准命中，表现为事件无响应
• 绑定层级错误：无需单独给内部描边模板strokes.template绑定事件，直接在LineSeries实例上绑定的逻辑更稳定，不会因图表重绘丢失
• 冗余配置：events.enableType("pointerover")无需手动调用，元素开启interactive后默认支持所有pointer类事件

正确实现代码 #

// 开启折线系列交互能力
series.set("interactive", true);

// 配置折线样式与交互热区
series.strokes.template.setAll({
  strokeWidth: 2, // 折线实际显示宽度
  hitStrokeWidth: 10, // 交互命中热区宽度，数值越大越容易触发悬停，不会改变折线实际显示效果
  stroke: "#2563eb" // 按业务需求配置折线颜色
});

// 绑定鼠标悬停事件
series.events.on("pointerover", function(ev) {
  console.log("悬停事件触发", ev.target);
  // 此处编写悬停逻辑，例：高亮当前折线
  ev.target.strokes.template.set("strokeWidth", 4);
});

// 可选：绑定鼠标移出事件，恢复折线默认状态
series.events.on("pointerout", function(ev) {
  ev.target.strokes.template.set("strokeWidth", 2);
});

扩展提示 #

如果需要获取悬停位置对应的数据点，可直接在事件回调中通过ev.target.get("tooltipDataItem")取数，无需额外计算坐标匹配数据。

内容的提问来源于stack exchange，提问作者j.d.o.