I have one level treemap from amcharts4.
I'm trying to set a link for each bullet when click on it, but can't achieve what I want.
As documentation says I tried:
level1_bullet.label.url = "https://www.google.com/";
or
level1_bullet.url = "https://www.google.com/";
both doesn't work, I was able to add
level1_bullet.label.html = "<a href='https://google.com/'>{name}</a>";
but there is a problem with truncate option which doesnt work and I can see too big names for smallest bullets, wrap also didn't help.
To turn a LabelBullet
into a link, try:
level1_bullet.label.url = "https://www.google.com/";
If we want dynamic urls, we'll have to use 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 Label
s have an adapter for their url
. It can look something like this:
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;
});
The adapter's handler has the url
that's set to the Label
( "https://www.google.com/"
in this case) as the first argument and the Label
instance as the second argument. What we return
ends up being our custom-formatted url
, ie it doesn't set it permanently, this is run every time your app is figuring out what the value for url
should be.
I've created a demo here:
https://codepen.io/team/amcharts/pen/79194dfcfccaa05f5ebe20e1095f3087
Let me know if this makes sense, if this at all helps with what you were looking to do.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.