Am5 amcharts Tooltip HTML und Link
Posted: 20 Jan 2025, 15:58
Ich versuche, einer am5charts-Karte einen Tooltip hinzuzufügen. Der Tooltip muss ein A-Tag enthalten. Der beigefügte Code erstellt die Karte, fügt die Daten und den Tooltip hinzu, sodass diese angeklickt werden können und nicht verschwinden.
Die Formatierung im Tooltip ist in Ordnung, aber die Links (a- Tags) funktionieren nicht.
Aus dem Dokument geht hervor, dass set("interactive", true) ein Schlüssel ist, aber für welches Element soll dies in einer pointSeries aufgerufen werden?< /p>
pointSeries.get("tooltip").label.set("interactive", true); funktioniert nicht.
Das Wichtigste:
....
Eine jetzt interaktive, die nicht funktioniert/das A-Tag anklickbar macht:
pointSeries.get("tooltip").label. set("interaktiv", true);
Die Formatierung im Tooltip ist in Ordnung, aber die Links (a- Tags) funktionieren nicht.
Aus dem Dokument geht hervor, dass set("interactive", true) ein Schlüssel ist, aber für welches Element soll dies in einer pointSeries aufgerufen werden?< /p>
pointSeries.get("tooltip").label.set("interactive", true); funktioniert nicht.
Code: Select all
var test="[url=/test/people/327/11619]John York | Blue[/url]Mike Blank | GreenMike Blank | GreenMike Blank | Green";
var test2="[url=/test/people/327/11619]John York | Blue[/url]Mike Blank | GreenMike Blank | GreenMike Blank | Green";
var cities = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "New York City",
"contacts": test
},
"geometry": {
"type": "Point",
"coordinates": [-73.778137, 40.641312]
}
}, {
"type": "Feature",
"properties": {
"name": "London",
"contacts": test2
},
"geometry": {
"type": "Point",
"coordinates": [-0.454296, 51.470020]
}
}, {
"type": "Feature",
"properties": {
"name": "Beijing",
"contacts": "John ChinaGreenMike BlankGreenMike BlankGreenMike BlankGreen"
},
"geometry": {
"type": "Point",
"coordinates": [116.597504, 40.072498]
}
}]
};
var root = am5.Root.new("mapdiv5");
var chart = root.container.children.push(
am5map.MapChart.new(root, {
projection: am5map.geoEquirectangular()
})
);
var polygonSeries = chart.series.push(
am5map.MapPolygonSeries.new(root, {
geoJSON: am5geodata_worldCustomHigh,
fill: am5.color(0x001146),
stroke: am5.color(0xffffff),
strokeWidth: 5,
})
);
var pointSeries = chart.series.push(
am5map.MapPointSeries.new(root, {
geoJSON: cities
})
);
Code: Select all
pointSeries.bullets.push(function() {
var circle = am5.Circle.new(root, {
radius: 5,
fill: am5.color(0xffba00),
tooltipHTML: "{contacts}",
cursorOverStyle: "pointer",
keepTargetHover: true,
paddingBottom: 10,
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
toggleKey: "active"
});
circle.on("active", function(active, target) {
if (active) {
target.setAll({
showTooltipOn: "always",
});
} else {
target.setAll({
showTooltipOn: "hover",
});
}
target.showTooltip();
});
circle.events.on("click", function(ev) {
console.log(ev.target.dataItem);
});
Code: Select all
....return am5.Bullet.new(root, {
sprite: circle,
tooltip: am5.Tooltip.new(root, {
getFillFromSprite: false,
getStrokeFromSprite: true,
autoTextColor: false,
labelText: "", // This prevents default text-based tooltips
html: "{tooltipHTML}" // Use the HTML content from the data
})
});
});
pointSeries.get("tooltip").label. set("interaktiv", true);