amcharts:如何在工具提示中添加动作

时间:2020-04-25 08:43:47

标签: javascript amcharts

我正在尝试在以下amcharts中添加动作:

function myfunc(name){
  alert("hi "+name);
}

var tooltipDetail='<div class="detail" name="{name}" onclick="myfunc({name});">detail {name}</div>'

series1.columns.template.tooltipHTML = tooltipDetail;

当我将“ myfunc()”替换为“ alert(1)”时,它将启动警报,但代码中定义的myfunc在控制台“未捕获的ReferenceError:未定义myfunc”中启动错误。为什么?我该如何解决这个问题?

我的意图是使用jquery创建更复杂的功能,例如:

$('.detail').click(function(){
  var name=this.attr("name");
  $("#selected").html(name);
});

但是它不起作用,然后我简化了代码...如果尚未显示工具提示,我检查了$('。detail')。html()不可用,因此我认为它是在工具提示启动时构建的。

我也尝试在工具提示中包含该功能,例如:

var tooltipDetail='<script>function hi({name}){alert("hi"+name);}</script><div class="detail" name="{name}" onclick="hi({name});">detail {name}</div>'

这会导致相同的问题,未定义“ hi”。

有什么建议吗? 谢谢

2 个答案:

答案 0 :(得分:3)

AmCharts似乎有一个事件系统。尝试使用点击事件处理程序:

function myfunc(){
  alert(1);
}
series.tooltip.events.on('hit', myFunc);

在可单击工具提示的位置查看此修改后的CodePen: https://codepen.io/krassdanke/pen/ZEbyQyY(来自amCharts官方文档的原始版本:https://www.amcharts.com/docs/v4/tutorials/clickable-links-in-tooltips/

答案 1 :(得分:3)

@dth很好,完整的答案是:

function myFunction(name){
  alert(name);
};

series1.columns.template.events.on(
  "hit",
  ev => {myFunction(ev.target._dataItem.dataContext["name"]);},
  this
);