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

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

chart.cursor = new am4charts.XYCursor();

从那里，如果你想过滤显示哪些工具提示以及剩下的工具提示中显示的内容，我建议在每个子弹的adapter上设置一个tooltipText。触发工具提示的原因是对象是否具有非空的tooltipText属性。因此，对于我们想隐藏的工具提示，使用适配器我们可以返回""随意隐藏它们。

为了确定我们是否悬停在多个子弹上，在这种情况下我们可以检查它们是否具有相同的确切值，我们知道值键是cars，motorcycles和bicycles，所以如果它们在悬停时完全相同，抑制两个工具提示，并修改另一个的文本以显示所有三个工具提示的数据。适配器的第二个参数将是我们悬停的对象，它的dataItem.dataContext将引用我们想要比较的数据/值。

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;
}

这是代码示例的一个分支，包含上述更改：

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

如果需要，可以省略图表光标，然后必须单独悬停在项目符号上以显示工具提示。由于series3是图表的最新成员，它将具有更高的堆叠顺序并且将覆盖同一点上的其他子弹，因此上面的适配器将使用/不使用图表光标实现相同的效果。

Answer 2

将光标与工具提示定位结合使用。您可以这样创建游标：

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。