ChartJS：为水平条形图垂直线添加动态标签及缩减分组间距

一、为垂直线添加绑定标签 #

使用annotations插件v0.5.5时，直接在垂直线的配置中添加label属性即可实现标签绑定。注意插件配置项为**annotation（单数）**，而非复数形式：

annotation: {
  drawTime: 'afterDatasetsDraw', // 确保标签在图表绘制完成后显示
  line: [{
    type: 'verticalLine',
    xScaleID: 'x-axis-0',
    value: 50, // 横轴目标位置
    borderColor: 'red',
    borderWidth: 2,
    // 标签配置
    label: {
      enabled: true, // 开启标签
      content: '阈值1', // 标签文本
      position: 'top', // 标签位置：top/bottom/center
      fontColor: 'red',
      fontSize: 12,
      backgroundColor: 'rgba(255,255,255,0.8)' // 可选：添加背景避免遮挡图表
    }
  },
  // 另外两条垂直线的配置同理
  {
    type: 'verticalLine',
    xScaleID: 'x-axis-0',
    value: 80,
    borderColor: 'blue',
    borderWidth: 2,
    label: {
      enabled: true,
      content: '阈值2',
      position: 'bottom',
      fontColor: 'blue',
      fontSize: 12
    }
  },
  {
    type: 'verticalLine',
    xScaleID: 'x-axis-0',
    value: 100,
    borderColor: 'green',
    borderWidth: 2,
    label: {
      enabled: true,
      content: '阈值3',
      position: 'center',
      fontColor: 'green',
      fontSize: 12
    }
  }]
}

二、减少条形分组之间的间距 #

对于水平条形图（type: 'horizontalBar'），分组间距由options.scales.yAxes中的两个参数控制：

• barPercentage：单个条形占所在分组宽度的比例，值越大，分组内条形越宽、间距越小
• categoryPercentage：整个分组占可用空间的比例，值越大，分组之间的间距越小

示例配置：

options: {
  scales: {
    yAxes: [{
      barPercentage: 0.95, // 可调整至接近1，默认0.9
      categoryPercentage: 0.9, // 可调整至接近1，默认0.8
      ticks: {
        beginAtZero: true
      }
    }],
    xAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
}

可根据视觉效果逐步增大这两个参数，直到达到理想的间距。

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