如何使用Chart.js创建单轴线气泡图？

选型结论 #

直接使用你原本尝试的气泡图即可实现目标效果，无需更换其他图表类型。你之前遇到的单轴线问题只需要通过坐标轴配置就能解决。

核心实现思路 #

• 数据配置：所有气泡的y字段统一设为同一个固定值（比如0），仅通过x字段控制气泡水平位置，r字段控制气泡大小
• 坐标轴配置：直接隐藏Y轴，仅保留X轴作为唯一展示轴线

可运行配置示例 #

const bubbleChartConfig = {
  type: 'bubble',
  data: {
    datasets: [{
      label: '数据气泡',
      data: [
        { x: 15, y: 0, r: 8 },
        { x: 32, y: 0, r: 18 },
        { x: 47, y: 0, r: 12 },
        { x: 68, y: 0, r: 22 },
        { x: 85, y: 0, r: 10 }
      ],
      backgroundColor: 'rgba(75, 192, 192, 0.6)',
      borderColor: 'rgba(75, 192, 192, 1)'
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        display: false, // 隐藏Y轴，实现单轴线效果
        min: -15, // 调整垂直方向留白，避免气泡被画布边缘截断
        max: 15
      },
      x: {
        type: 'linear',
        position: 'bottom',
        grid: {
          drawOnChartArea: false // 可选：隐藏X轴网格线，更贴近目标效果
        }
      }
    }
  }
};

自定义调整说明 #

• 若需要调整气泡在垂直方向的位置，只要统一修改所有数据项的y值，同步调整Y轴的min和max参数即可
• 气泡的颜色、边框样式、悬停交互效果都可以按照气泡图的标准配置项自定义

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