【问题标题】:amcharts: How to add an action in tooltipamcharts:如何在工具提示中添加操作
【发布时间】:2020-08-08 21:30:13
【问题描述】:

我正在尝试在 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 会在控制台中启动错误 'Uncaught ReferenceError: myfunc is not defined'。为什么?我该如何解决这个问题?

我的意图是使用 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' 没有定义。

有什么推荐吗? 谢谢

【问题讨论】:

    标签: javascript amcharts


    【解决方案1】:

    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/

    【讨论】:

    • 你能添加如何从点击栏获取信息吗???我的意图是做某事取决于吧。
    【解决方案2】:

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

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

    【讨论】:

    • 感谢您标记为最佳答案。从您最初的问题中并不清楚您还打算访问一个特殊的数据属性。 name 的值可以是任何值。如果您能在下一个问题中提供有关应实现的目标的更多信息,将不胜感激:)
    • 是的,你说的很对,下次我会更详细的解释。谢谢dth
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-06-28
    • 2020-08-25
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多