You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为AMCHARTS 5的X轴与Y轴标签添加点击事件?

实现AMCHARTS 5 Y轴标签的点击交互

要给反转图表的Y轴(左侧名称标签)添加点击事件,你需要直接操作Y轴的标签模板,而非系列的柱子模板,具体步骤如下:

  • 获取Y轴实例:若为默认创建的Y轴,可通过chart.yAxes.getIndex(0)获取,也可在初始化Y轴时提前保存引用
  • 为Y轴标签模板绑定点击事件:通过axis.renderer.labels.template.events.on()添加点击监听

示例代码:

// 获取Y轴实例
const yAxis = chart.yAxes.getIndex(0);

// 为Y轴标签添加点击事件
yAxis.renderer.labels.template.events.on("click", function(ev) {
  // ev.target 为被点击的标签元素
  // ev.dataItem 可获取标签对应的数据项,比如分类名称、关联数值等
  console.log("点击了Y轴标签:", ev.dataItem.get("category"));
});

注意事项:

  • 即便图表是反转状态,Y轴位置在左侧,获取和绑定事件的逻辑也不会改变
  • 若需要一次性点击事件,将on替换为once即可,和你绑定柱子点击的方式一致

内容的提问来源于stack exchange,提问作者Adrian Ciocălău

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.22 17:54:23