如何用ChartJS实现带定位点的百分比范围水平条形图

直接用水平条形图+散点图+注释插件组合实现，无需CSS旋转，完美匹配你的需求：

核心实现思路 #

• 用水平条形图展示0%-100%的基础范围
• 借助ChartJS的annotation插件绘制50%位置的中位竖线
• 叠加散点图放置动态数据点，精准定位在目标百分比位置

完整代码示例 #

<canvas id="rangeChart"></canvas>

<!-- 引入依赖 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@2.2.1"></script>
<script>
// 动态值，可替换为实际业务数据
const dynamicValue = 23;

const chart = new Chart(document.getElementById('rangeChart'), {
  type: 'bar',
  data: {
    labels: [''], // 空标签隐藏y轴冗余内容
    datasets: [
      // 0%-100%范围条形
      {
        data: [100],
        backgroundColor: '#e5e7eb',
        barThickness: 32,
        borderWidth: 0
      },
      // 动态数据点（散点图类型）
      {
        type: 'scatter',
        data: [{x: dynamicValue, y: 0}],
        backgroundColor: '#3b82f6',
        pointRadius: 9,
        pointHoverRadius: 11
      }
    ]
  },
  options: {
    indexAxis: 'y', // 启用水平条形图
    responsive: true,
    plugins: {
      legend: { display: false }, // 隐藏图例
      tooltip: {
        callbacks: {
          label: ctx => ctx.dataset.type === 'scatter' ? `当前值: ${ctx.parsed.x}%` : ''
        }
      },
      // 配置中位线注释
      annotation: {
        annotations: {
          medianLine: {
            type: 'line',
            xMin: 50,
            xMax: 50,
            borderColor: '#ef4444',
            borderWidth: 2,
            borderDash: [6, 4] // 可选虚线样式
          }
        }
      }
    },
    scales: {
      x: {
        min: 0,
        max: 100,
        ticks: { callback: val => `${val}%` },
        grid: { display: false }
      },
      y: {
        ticks: { display: false },
        grid: { display: false }
      }
    }
  }
});
</script>

关键配置说明 #

1. 水平条形设置：通过indexAxis: 'y'直接生成水平条形，避免CSS旋转带来的坐标混乱
2. 中位线实现：利用annotation插件的线注释，通过xMin和xMax固定为50，实现精准的垂直中位线
3. 动态点定位：散点图的data中，x值设为目标百分比，y值与条形的y轴索引（这里是0）保持一致，确保点落在条形范围内
4. 样式优化：隐藏冗余的轴刻度、网格线，调整条形厚度和点的样式，让图表更简洁直观

自定义调整建议 #

• 条形背景色、点的颜色/大小、中位线样式可通过对应配置项修改
• 动态值可替换为接口返回数据或用户输入，直接更新dynamicValue后调用chart.update()即可刷新图表

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