如何使用Highchart绘制仅显示X轴的散点图

核心实现逻辑：所有散点固定同一个Y轴坐标，再完全隐藏Y轴，只保留X轴渲染，就能做出数据点沿X轴分布的效果。

具体实现步骤 #

• 初始化散点图基础配置，图表类型指定为scatter
• 处理数据集：所有数据点的Y值统一设为固定值（通常设为0即可），仅保留X轴的实际业务数值
• 配置Y轴：设置visible: false完全隐藏Y轴的轴线、刻度、标签，同时锁死Y轴的数值范围，避免视图自动缩放导致点不在同一水平线上
• 调整布局边距：缩小Y轴原本占用的上下边距，避免图表区域出现多余空白
• 按需调整散点样式、提示框、数据标签等细节即可

核心参考代码 #

Highcharts.chart('你的容器ID', {
  chart: {
    type: 'scatter',
    marginBottom: 60,
    marginTop: 20
  },
  title: {
    text: '' // 不需要标题可以留空
  },
  xAxis: {
    // 按业务需求配置X轴范围、刻度、标签
    min: 0,
    max: 100,
    tickInterval: 10,
    title: {
      text: 'X轴指标名称'
    }
  },
  yAxis: {
    visible: false, // 核心配置：完全隐藏Y轴
    min: -0.1,
    max: 0.1, // 锁死Y轴范围，保证所有点在同一水平线
    gridLineWidth: 0 // 关闭Y轴网格线
  },
  plotOptions: {
    scatter: {
      marker: {
        radius: 5, // 散点半径
        fillColor: '#2c7be5', // 散点填充色
        lineWidth: 1,
        lineColor: '#fff' // 散点描边
      },
      tooltip: {
        pointFormat: '对应数值：{point.x}'
      }
    }
  },
  series: [{
    name: '数据点',
    // 数据格式为[X值, 固定Y值]，Y值统一为0即可
    data: [[8, 0], [19, 0], [33, 0], [47, 0], [62, 0], [75, 0], [91, 0]]
  }]
});

常见调整技巧 #

• 如果散点和X轴轴线位置不对齐，微调固定Y值即可，比如把所有点的Y值从0改成0.03，配合Y轴的min/max参数，让点刚好落在X轴上方合适位置
• 需要展示点的数值标签时，在plotOptions.scatter下增加dataLabels: {enabled: true, format: '{point.x}'}配置即可
• 如果需要做数据点的交互事件，和普通散点图配置逻辑完全一致，不需要额外适配

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