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 属性。所以对于我们想要隐藏的tooltips，通过适配器我们可以return""随意隐藏。

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

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 是最新添加到图表中的，它将具有更高的堆叠顺序并且会覆盖同一点的其他项目符号，因此上面的适配器将实现相同的效果 with/without 图表光标。

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

Amcharts 4: How to combine tooltips of LineSeries

javascript

amcharts