Chart.js X轴标签问题：移除0.95标签后气泡位置异常

核心问题分析 #

直接删除labels数组中的0.95会导致原对应数据的索引偏移——因为分类轴是按索引映射位置的，所以气泡会被挤到1的位置。要实现显示0.5-1的标签区间，同时气泡留在0.95位置，有两种可行方案：

方案1：改用线性数值轴（推荐） #

将X轴从分类轴改为线性数值轴，让气泡的X坐标直接对应实际数值，再自定义显示需要的标签：

// 以Chart.js为例的配置示例
const chartConfig = {
  type: 'bubble',
  data: {
    datasets: [{
      data: [
        // 气泡数据的X值直接用实际数值，比如0.95
        { x: 0.5, y: 10, r: 5 },
        { x: 0.95, y: 15, r: 8 },
        { x: 1, y: 12, r: 6 }
      ]
    }]
  },
  options: {
    scales: {
      x: {
        type: 'linear',
        min: 0.5,
        max: 1,
        ticks: {
          // 仅显示指定的标签
          callback: function(value) {
            const targetLabels = [0.5, 0.6, 0.7, 0.8, 0.9, 1];
            return targetLabels.includes(value) ? value : null;
          }
        }
      }
    }
  }
};

这种方式下，气泡的位置完全由X值决定，不受标签影响，能精准落在0.9和1之间，同时X轴只显示你需要的标签。

方案2：保留分类轴，隐藏0.95标签 #

如果必须使用分类轴，可保留完整的labels数组，通过回调函数隐藏0.95的标签，气泡仍对应原索引位置：

const chartConfig = {
  type: 'bubble',
  data: {
    labels: [0.5, 0.6, 0.7, 0.8, 0.9, 0.95, 1],
    datasets: [{
      data: [
        { x: 0, y: 10, r: 5 },
        { x: 1, y: 12, r: 6 },
        { x: 2, y: 9, r: 4 },
        { x: 3, y: 14, r: 7 },
        { x: 4, y: 11, r: 5 },
        { x: 5, y: 15, r: 8 }, // 对应0.95位置的气泡
        { x: 6, y: 13, r: 6 }
      ]
    }]
  },
  options: {
    scales: {
      x: {
        ticks: {
          // 隐藏0.95标签
          callback: function(_, index, ticks) {
            return ticks[index].value === 0.95 ? null : ticks[index].value;
          }
        }
      }
    }
  }
};

此方案中，X轴的标签仅隐藏0.95，气泡仍在原索引对应的位置，视觉上处于0.9和1之间。

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