时间戳

首页 > 解决方案 > Amcharts 4 TreeMap 项目符号链接

javascript - Amcharts 4 TreeMap 项目符号链接

问题描述

我有来自 amcharts4 的一级树形图。

单击它时，我试图为每个项目符号设置一个链接，但无法实现我想要的。

正如文档所说，我尝试过：

level1_bullet.label.url = "https://www.google.com/";

或者

level1_bullet.url = "https://www.google.com/";

两者都不起作用，我可以添加

level1_bullet.label.html = "<a href='https://google.com/'>{name}</a>";

但是 truncate 选项有一个问题，它不起作用，我可以看到对于最小的子弹来说太大的名字，wrap 也没有帮助。

标签： javascriptgraphchartsamchartstreemap

解决方案

要将 aLabelBullet转换为链接，请尝试：

level1_bullet.label.url = "https://www.google.com/";

如果我们想要动态 url，我们将不得不使用一个适配器。这url是一个简单的字符串，它并不是真正用于显示的，因此它不会经过我们的字符串格式化{name}，这意味着不会解析像这样的占位符。幸运的是Labels 有一个适配器用于他们的url. 它看起来像这样：

level1_bullet.label.adapter.add("url", function(url, label) {
  var query = "";
  var data = label.dataItem;
  if (data.dataContext && data.dataContext.name) {
    query = "?q=" + data.dataContext.name;
  }
  return url + query;
});

适配器的处理程序将url设置为Label("https://www.google.com/"在这种情况下) 作为第一个参数，将Label实例设置为第二个参数。我们return最终成为自定义格式url，即它不会永久设置它，每次您的应用程序确定值url应该是什么时都会运行它。

我在这里创建了一个演示：

https://codepen.io/team/amcharts/pen/79194dfcfccaa05f5ebe20e1095f3087

让我知道这是否有意义，如果这对您想要做的事情有帮助。

推荐阅读