如何在图表y轴Tooltip的每个数值旁添加自定义字符串？

该需求完全可以实现，核心操作分为扩展数据结构、自定义Tooltip渲染逻辑两步，操作方法如下：

1. 扩展原始数据结构 #

在你原有dataPoints数组的每个数据对象中，新增一个自定义字段存储对应点位要展示的后缀内容即可，示例代码：

dataPoints: [
  { x: new Date(2021,10,20), y: 1, customSuffix: "(5)" },
  { x: new Date(2021,10,21), y: 3, customSuffix: "(1,4,3)" },
  { x: new Date(2021,10,22), y: 2, customSuffix: "(2,3)" },
  // 剩余数据按同样规则补充customSuffix字段
]

2. 重写Tooltip格式化逻辑 #

目前所有主流前端图表库都支持自定义Tooltip内容，你只需要找到对应库的Tooltip格式化配置项，在渲染时拼接日期、y值和你新增的自定义后缀字段即可，通用逻辑参考：

// 不同图表库的formatter入参结构略有差异，对应调整取值即可
tooltip: {
  formatter: (currentPoint) => {
    // 把日期格式化为你需要的「日 月 年」展示格式
    const formattedDate = dateFormat(currentPoint.x, "dd mmm yy")
    // 按要求拼接最终展示内容
    return `${formattedDate} : ${currentPoint.y} ${currentPoint.customSuffix}`
  }
}

按上述方式配置完成后，即可实现你要求的Tooltip显示效果。

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