如何在Angular的ng-apexcharts中根据系列数据显示正确提示框？

问题根源分析 #

1. Tooltip自定义回调写法错误：你将custom赋值为数组，而ApexCharts要求tooltip.custom是单个函数，数组形式会导致参数传递异常，始终返回seriesIndex=0。
2. 数据点完全重叠：两个系列的y值均为0，且x轴日期相同，导致图表无法区分悬停的是哪个系列的点。

分步解决方案 #

1. 修正Tooltip自定义回调的写法 #

将数组形式的回调改为单个函数：

config.tooltip.feeling.custom = ({ seriesIndex, w }) => {
  return `<div class="apexcharts-tooltip-candlestick p-2">${w.globals.seriesNames[seriesIndex]}</div>`;
};

2. 关闭Tooltip共享模式（可选） #

如果多个系列的点在同一位置，开启shared会合并Tooltip，导致无法区分单个系列，建议关闭：

config.tooltip.feeling.shared = false;

3. 使用更可靠的悬停系列索引 #

若seriesIndex仍不准确，可改用w.globals.hoveredSeriesIndex获取当前悬停的系列：

config.tooltip.feeling.custom = ({ w }) => {
  const activeSeriesIndex = w.globals.hoveredSeriesIndex;
  return `<div class="apexcharts-tooltip-candlestick p-2">${w.globals.seriesNames[activeSeriesIndex]}</div>`;
};

4. 给重叠数据点添加微小偏移 #

由于两个系列的y值完全相同，图表无法区分，可给其中一个系列的y值加微小偏移（视觉上无差异，但能让图表识别为不同点）：

const bad = this.patient.measures.feeling
  .filter(({ value }) => value === 'bad')
  .map(({ date }) => ({ x: date, y: 0 }));

const good = this.patient.measures.feeling
  .filter(({ value }) => value === 'good')
  .map(({ date }) => ({ x: date, y: 0.1 })); // 添加微小偏移

5. 验证数据过滤函数 #

确保filterData函数正确返回两个系列的独立数据，没有将good和bad的数据混淆。

内容的提问来源于stack exchange，提问作者Dylan Grum's