Apex Charts Timeline数据标签与tooltip、项目标题不同步问题咨询

问题判定 #

该现象不属于业务series配置的逻辑错误，是组件在多系列rangeBar（时间线/甘特）场景下的内置索引取值缺陷，可通过配置调整完全解决。

错配根因 #

• tooltip的取值逻辑是直接绑定当前鼠标悬停条目的独立数据索引，因此展示的项目名完全和当前条目的x值匹配，不会出现错配
• 默认数据标签的取值逻辑存在偏移：组件会累加全局所有系列的条目数生成索引值，当第一个系列之后的系列数据条数和第一个系列不相等时，偏移量会持续累加，导致后续所有系列的datalabel全部取到前序系列的项目名，出现不同步问题
• 第一个系列展示正常，是因为它位于全局索引的起始位置，不存在前置偏移量

修复方案 #

• 显式自定义dataLabels.formatter的取值逻辑，绕过组件默认的索引偏移规则，直接从当前渲染的条目对象中取项目名渲染，参考配置：

dataLabels: {
  enabled: true,
  formatter: function(value, context) {
    // 精准定位当前渲染的条目，直接取x字段作为标签文本
    return context.w.config.series[context.seriesIndex].data[context.dataPointIndex].x
  }
}

• 配置校验：多系列时间线场景下不要开启plotOptions.bar.distributed参数，该参数会进一步放大索引错位的概率

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