Am5 amcharts Tooltip HTML und LinkJavaScript

Javascript-Forum
Guest
 Am5 amcharts Tooltip HTML und Link

Post by Guest »

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.

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
})
);
Das Wichtigste:

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
})
});
});
Eine jetzt interaktive, die nicht funktioniert/das A-Tag anklickbar macht:
pointSeries.get("tooltip").label. set("interaktiv", true);

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post