Amcharts 4 TreeMap项目符号链接

时间:2018-10-12 09:41:49

标签: javascript graph charts amcharts 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选项存在一个问题,该问题不起作用,我可以看到太大的名称以容纳最小的项目符号,换行也无济于事。

1 个答案:

答案 0 :(得分:1)

要将LabelBullet转换为链接,请尝试:

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

如果要使用动态网址,则必须使用an adapterurl是一个不打算显示的简单字符串,因此不会通过our string formatting,这意味着不会解析诸如{name}的占位符。幸运的是Label个有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,即它没有永久设置,每次您的应用程序确定url的值应为

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

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

让我知道这是否有意义,这是否对您想要的工作有所帮助。