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();

从那里，如果您想过滤显示哪些工具提示以及剩余工具提示中显示的内容，我建议在每个项目符号的tooltipText 上设置一个adapter。如果对象具有非空的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。