Amcharts 4：如何组合LineSeries的工具提示

Question

我有一个包含3个LineSeries的图表。有时，线彼此交叉。在这些点上，仅显示最后添加的系列的单个工具提示。

如果点在同一位置，如何将这些工具提示合并为一个包含所有三个系列信息的单个工具提示？

我使用LineSeries构建图表并将CircleBullets放在它们上：

/* Create series */
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "cars";
series1.dataFields.categoryX = "year";
series1.name = "Cars";
series1.strokeWidth = 3;
series1.tensionX = 0.7;
bullet1 = series1.bullets.push(new am4charts.CircleBullet());
bullet1.tooltipText = `[bold]YEAR {categoryX}[/]
----
cars: {cars}`;

var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "motorcycles";
series2.dataFields.categoryX = "year";
series2.name = "Motorcycles";
series2.strokeWidth = 3;
series2.tensionX = 0.7;
bullet2 = series2.bullets.push(new am4charts.CircleBullet());
bullet2.tooltipText = `[bold]YEAR {categoryX}[/]
----
motorcycles: {motorcycles}`;

var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "bicycles";
series3.dataFields.categoryX = "year";
series3.name = "Bicycles";
series3.strokeWidth = 3;
series3.tensionX = 0.7;
bullet3 = series3.bullets.push(new am4charts.CircleBullet());
bullet3.tooltipText = `[bold]YEAR {categoryX}[/]
----
Bicycles: {bicycles}`;

完整示例：https://codepen.io/anon/pen/ommRPp

Answer 1

使用工具提示位置组合光标。您可以通过以下方式创建游标：

chart.cursor = new am4charts.XYCursor();

这将显示所有标签，但位置较差。

您应该使用tooltip对象放置每个系列的工具提示：

var t = new am4core.Tooltip();
t.dy=-20; // This will move the tooltip 20 pixels up
bullet2.tooltipText = `[bold]YEAR {categoryX}[/]
---- 
motorcycles: {motorcycles}`
bullet2.tooltip = t;

查看所有不同的定位选项here。

Answer 2

就像Albondi所说的那样，您可以从图表光标开始，这样我们就可以一直触发所有工具提示：

chart.cursor = new am4charts.XYCursor();

从那里开始，如果要过滤显示哪些工具提示以及在剩余的工具提示中显示什么，我建议在每个项目符号的tooltipText上设置一个adapter。引发工具提示的原因是对象是否具有非空的tooltipText属性。因此，对于我们要隐藏的工具提示，使用适配器，我们只需返回""即可随意隐藏它们。

要确定我们是否将鼠标悬停在多个项目符号上，在这种情况下，我们可以检查它们是否具有相同的确切值，我们知道值键为cars，motorcycles和{{ 1}}，因此，如果它们在悬停时完全相同，请取消其中两个工具提示，然后修改另一个工具提示的文本以显示所有三个工具的数据。适配器的第二个参数将是我们悬停的对象，它的bicycles将引用我们要比较的数据/值。

dataItem.dataContext

这是您的代码示例的分支，其中进行了上述更改：

https://codepen.io/team/amcharts/pen/a9c1d3eff9170c04f18e134bd6940daa

如果需要，可以省略“图表光标”，然后必须将鼠标悬停在项目符号上才能显示工具提示。由于bullet1.adapter.add("tooltipText", blankTooltipTextOnSameValues); bullet2.adapter.add("tooltipText", blankTooltipTextOnSameValues); bullet3.adapter.add("tooltipText", function(text, target) { var data = target.dataItem.dataContext; if (data.bicycles === data.motorcycles && data.bicycles === data.cars) { return `[bold]YEAR {categoryX}[/] ---- Cars: {cars} Motorcycles: {motorcycles} Bicycles: {bicycles}`; } return text; }); function blankTooltipTextOnSameValues(text, target) { var data = target.dataItem.dataContext; if (data.bicycles === data.motorcycles && data.bicycles === data.cars) { return ""; } return text; } 是图表的最新添加，因此它将具有更高的堆叠顺序，并且将在同一点覆盖其他项目符号，因此上面的适配器将在有/没有图表光标的情况下达到相同的效果。