Amcharts 4 TreeMap 项目符号 link

Question

我有来自 amcharts4 的一级树图。

我正在尝试为每个项目符号设置 link，但无法实现我想要的效果。

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

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>";

但是截断选项有一个问题，它不起作用，我可以看到对于最小的项目符号来说太大的名称，换行也没有帮助。

Answer 1

要将 LabelBullet 变成 link，请尝试：

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

如果我们想要动态 url，我们将不得不使用 an adapter. The url is a simple string that's not really intended for display, so it doesn't go through our string formatting, which means placeholders like {name} won't get parsed. Fortunately Labels have an adapter for their 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，即它不会永久设置它，这是运行每次您的应用计算 [=13] 的值时=] 应该是。

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

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

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

Amcharts 4 TreeMap 项目符号 link

Amcharts 4 TreeMap bullet link

javascript

charts

graph

treemap

amcharts