带有HTML链接的nvd3工具提示

nvd3 tool tip with HTML link?

本文关键字：nvd3 工具提示 链接 HTML 带有      更新时间：2023-09-26

如何自定义工具提示以在其上创建链接？显然，这个链接应该是可点击的。我已经做了类似的事情

  chart.tooltip.contentGenerator(function (d){
          var html = '<h3>' + d.value + '</h3>' +
          ' <a href="http://www.w3schools.com/html/">LINK</a>'+ d.point.x;
          return html;
        });

但是什么都没有，我无法点击链接。此外，我还在为刀尖的位置而挣扎，因为我不知道如何修复它。

感谢

nvd3似乎在CSS中为工具提示设置了pointer-events: none，从而禁用链接事件。您可以尝试为.nvtittip类重写此属性，或者添加自己的属性，即

chart.tooltip.classes('myclass');
.nvtooltip.myclass {
    pointer-events: auto;
}

您可以使用chart.tooltip.position({ top: 100, left: 100 })();将工具提示定位在任何需要的位置。

相关文章：