Chart.js气泡图存在重复数据标签时如何指定气泡绘制位置

解决方法 #

你使用的是分类类型X轴，存在重复标签时直接使用标签在labels数组对应的索引值作为气泡的x参数即可准确定位，索引从0开始计数：

• 定位第1个"1"标签（labels数组第0位），写x: 0
• 定位第3个"1"标签（labels数组第2位），写x: 2

修改后的气泡数据集示例：

{
  label: "Bubble_Two",
  type: "bubble",
  backgroundColor: "#3e95cd",
  backgroundColorHover: "#3e95cd",
  data: [{x: 2, y: 6, r: 15}] // 此处2对应第二个"1"标签的索引
}

原理解释 #

Chart.js分类轴解析x值时会优先判断值类型：

• 传入数字时，直接作为下标匹配labels数组对应位置
• 传入字符串时，会匹配标签文本，默认返回第一个匹配的位置，这也是直接写x: "1"只能定位到第一个重复标签的原因

你之前尝试的"1"[0]是取字符串"1"的第0位字符，运行结果仍然是字符串"1"，所以无法生效。

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