LabelTooltip
看起来更符合您想要做的事情。
然而,事实仍然是它们不是工具提示。如果你还想要实际的Tooltip
s,例如因为LabelBullet
没有...提示指向其相关的项目符号,因为工具提示有点像单例,即每个系列 1 个,并且项目符号利用它,您必须滚动自己的工具提示。
如果您启用了动画主题并具有初始动画,为避免出现问题,请等到系列动画结束后再执行您需要执行的操作:
// A series already gets a transitionended event, so we'll wait for chart to be ready to listen to the right one
chart.events.once("ready", function(event) {
chart.series.each(function(series) {
// Wait for the init animation to be over before doing what we need to
series.events.once("transitionended", function(seriesEvent) {
// your code here
});
});
});
此时,我们可以创建工具提示,将其数据链接到系列,并根据每个项目符号放置它们。子弹可以在系列中找到bulletsContainer
。请务必根据需要自定义工具提示,例如:
series.bulletsContainer.children.each(function(bullet, index) {
var tooltip = new am4core.Tooltip();
tooltip.dataItem = tooltip.tooltipDataItem = series.dataItems.getIndex(index);
// place the tooltip in an appropriate container so the x/y coords are exact
tooltip.parent = chart.plotContainer;
tooltip.x = bullet.x;
tooltip.y = bullet.y;
tooltip.label.text = "{nameX}\n[bold font-size: 20]{valueY}[/]";
tooltip.getFillFromObject = false;
tooltip.background.fill = series.fill;
tooltip.show();
});
Fork:
https://jsfiddle.net/notacouch/9Ljk7t6z/ https://jsfiddle.net/notacouch/9Ljk7t6z/
演示中提供了与图例切换兼容的附加代码,可以帮助您入门。