如何在ChartJS中设置圆形X轴刻度标记？

Chart.js本身确实没有内置配置项可以直接把X轴刻度标记改成圆形，但可以通过自定义插件来实现这个效果，具体步骤如下：

步骤1：隐藏默认的短划线刻度 #

先在X轴配置里关闭默认刻度线的绘制，只保留刻度文字：

options: {
  scales: {
    x: {
      grid: {
        drawTicks: false // 关闭默认短划线刻度的绘制
      },
      ticks: {
        display: true // 保留刻度标签文字
      }
    }
  }
}

步骤2：编写自定义插件绘制圆形刻度 #

利用Chart.js的插件机制，在afterDraw阶段手动绘制圆形标记。插件会遍历X轴的所有刻度，计算每个刻度的画布坐标，然后用原生Canvas API画圆：

const circleTickPlugin = {
  id: 'circleTicks',
  afterDraw: (chart) => {
    const ctx = chart.ctx;
    const xAxis = chart.scales.x;
    
    // 遍历X轴的每个刻度
    xAxis.ticks.forEach(tick => {
      // 计算刻度对应的画布X坐标
      const pixelX = xAxis.getPixelForValue(tick.value);
      // 设置圆形的Y位置（这里是轴下方10px，可按需调整）
      const pixelY = xAxis.bottom + 10;
      const radius = 3; // 圆形半径，根据需求修改大小
      
      // 开始绘制圆形
      ctx.save();
      ctx.beginPath();
      ctx.arc(pixelX, pixelY, radius, 0, Math.PI * 2);
      ctx.fillStyle = '#666'; // 圆形填充色，可自定义
      ctx.fill();
      ctx.restore();
    });
  }
};

步骤3：在图表中注册插件 #

创建图表实例时，将自定义插件加入plugins数组即可生效：

new Chart(document.getElementById('myChart'), {
  type: 'line', // 替换成你实际使用的图表类型（如bar、line等）
  data: {
    // 你的数据配置
    labels: ['1月', '2月', '3月', '4月'],
    datasets: [{
      label: '示例数据',
      data: [12, 19, 3, 5],
      borderColor: '#36A2EB',
      tension: 0.1
    }]
  },
  options: { /* 步骤1中的配置 */ },
  plugins: [circleTickPlugin]
});

自定义调整说明 #

• 若想把圆形放在轴上方，可将pixelY改为xAxis.top - 10
• 修改radius可以调整圆形大小，fillStyle可以修改圆形颜色
• 如果存在多个X轴，可通过判断xAxis.id来指定目标轴绘制

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