ChartJS v2.9气泡图y轴分类标签含数字时数据不渲染问题

根因说明 #

这是ChartJS v2.x版本的已知问题，核心缺陷为分类轴的自动类型检测逻辑异常：当y轴分类标签包含数字字符时，框架会错误将分类轴识别为数值类型，导致传入的分类型y值无法和轴坐标匹配，最终出现标签正常显示、数据点不渲染且无控制台报错的现象。

可行解决方案 #

• 方案1：强制指定y轴类型为category，跳过自动识别逻辑
  在图表配置的scales配置项中显式声明y轴类型，同时明确传入分类标签列表即可解决绝大多数场景的问题，示例配置如下：

new Chart(ctx, {
  type: 'bubble',
  data: {
    labels: ["分类A", "分类B", "含数字的分类123"], // 你的y轴全部分类标签
    datasets: yourDatasets // 你的气泡图数据集
  },
  options: {
    scales: {
      yAxes: [{
        type: 'category', // 强制指定为分类轴，为核心修复配置
        position: 'left'
      }]
    }
  }
});

• 方案2：数据y值替换为标签索引
  如果方案1未生效，可将气泡数据中y字段的取值改为对应标签在labels数组中的下标（从0开始计数），不管标签内容是什么都能准确定位坐标。
• 方案3：标签内容转义处理
  对所有含数字的标签统一添加非数字前缀（例如下划线_），再通过ticks.callback回调在渲染时移除前缀，从根源避免自动类型识别误判，示例配置如下：

options: {
  scales: {
    yAxes: [{
      type: 'category',
      ticks: {
        callback: function(value) {
          // 去掉前缀的下划线，渲染原始标签内容
          return value.startsWith('_') ? value.slice(1) : value;
        }
      }
    }]
  }
}

• 方案4：版本升级
  如果业务允许升级依赖，升级到ChartJS v3及以上版本即可彻底解决该问题，v3版本重构了轴类型检测逻辑，不存在该类识别异常。

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