Amcharts 4：如何合并LineSeries重叠数据点的提示框

嘿，这个问题我刚好踩过坑！要实现重叠数据点显示整合所有系列信息的提示框，你需要放弃给每个单独Bullet设置tooltip的方式，改用AmCharts 4的**共享提示框（Shared Tooltip）**功能。下面是具体的修改方案：

核心思路 #

原来的写法是给每个系列的Bullet单独绑定tooltip，当数据点重叠时，后添加的系列Bullet会覆盖前面的，所以只会显示最后一个系列的提示框。而启用图表级的共享提示框后，AmCharts会自动收集当前鼠标位置下所有系列的有效数据，合并成一个统一的提示框展示。

修改步骤 #

1. 移除每个Bullet的tooltipText配置：不需要再给单个Bullet设置提示内容，统一交给图表的共享提示框处理。
2. 启用并配置图表的共享提示框：创建全局tooltip实例，设置提示内容模板，让它自动匹配各个系列的名称和数据。
3. 确保系列name属性正确设置：共享提示框会通过name属性关联对应的数据系列，所以这个属性不能少。

修改后的完整代码 #

/* Create chart instance */
var chart = am4core.create("chartdiv", am4charts.XYChart);

/* Add data */
chart.data = [
  { year: "2000", cars: 152, motorcycles: 205, bicycles: 101 },
  { year: "2001", cars: 180, motorcycles: 220, bicycles: 120 },
  { year: "2002", cars: 180, motorcycles: 180, bicycles: 180 }, // 重叠数据点测试
  { year: "2003", cars: 200, motorcycles: 210, bicycles: 150 },
  { year: "2004", cars: 230, motorcycles: 250, bicycles: 180 }
];

/* Create axes */
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

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

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

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

// 配置共享提示框
chart.tooltip = new am4charts.Tooltip();
chart.tooltip.defaultState.transitionDuration = 0; // 取消过渡动画，让提示框显示更即时
// 设置提示框文本模板，自动匹配当前点的年份和各系列数据
chart.tooltip.tooltipText = `[bold]YEAR {categoryX}[/]\n{name}: {valueY}`;

// 可选优化：如果需要更美观的格式，可以改用HTML模板
// chart.tooltip.tooltipHTML = `<strong>YEAR {categoryX}</strong><br>{name}: {valueY}`;

// 可选：强制显示所有系列的数据（即使部分系列在该点没有数据或不重叠）
// chart.tooltip.getFillFromObject = false;
// chart.tooltip.label.maxWidth = 0;

效果说明 #

修改后，当鼠标悬停在重叠的数据点上时，提示框会同时展示Cars、Motorcycles、Bicycles三个系列的数值，而不是只显示最后一个系列的内容。

内容的提问来源于stack exchange，提问作者Hokascha