如何为gauge.js仪表盘的刻度条添加自定义图标？

要给 gauge.js 的仪表盘刻度添加自定义图标，核心思路是利用 Canvas API 手动绘制图标，或者通过重写 gauge.js 的内置绘制钩子来实现。下面是具体的实现方案：

1. 完善基础配置 #

首先把仪表盘的基础配置补全，确保刻度显示正常：

var opts = {
  angle: 0.15, // 仪表盘的半角（控制弧度大小）
  lineWidth: 0.44, // 刻度条的宽度
  radiusScale: 1, // 仪表盘半径缩放比例
  pointer: {
    length: 0.6,
    strokeWidth: 0.035,
    color: '#000000'
  },
  colorStart: '#6FADCF',
  colorStop: '#8FC0DA',
  strokeColor: '#E0E0E0',
  generateGradient: true,
  highDpiSupport: true,
  // 定义主刻度
  majorTicks: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
  exactTicks: true,
  minValue: 0,
  maxValue: 10
};

2. 方案一：绘制完成后手动添加图标 #

在仪表盘绘制完成后，获取 Canvas 上下文，计算每个刻度的坐标，然后绘制图标：

var target = document.getElementById('guage');
var gauge = new Gauge(target).setOptions(opts);
// 注意：maxValue是10，所以这里设置5更合理
gauge.set(5);

// 加载自定义图标（替换成你的图标路径）
var customIcon = new Image();
customIcon.src = 'your-icon.png';

customIcon.onload = function() {
  var ctx = target.getContext('2d');
  var centerX = target.width / 2;
  var centerY = target.height / 2;
  var gaugeRadius = gauge.config.radius;
  var totalTicks = opts.majorTicks.length;
  // 计算仪表盘的起始和结束角度
  var startAngle = Math.PI - opts.angle;
  var angleRange = 2 * opts.angle;

  // 遍历每个刻度，绘制图标
  opts.majorTicks.forEach(function(tickText, index) {
    // 计算当前刻度对应的角度
    var tickAngle = startAngle + (index / (totalTicks - 1)) * angleRange;
    // 让图标稍微向外偏移，避免和刻度线重叠
    var iconX = centerX + (gaugeRadius + 15) * Math.cos(tickAngle);
    var iconY = centerY + (gaugeRadius + 15) * Math.sin(tickAngle);
    // 绘制图标（这里设置为20x20大小，可按需调整）
    ctx.drawImage(customIcon, iconX - 10, iconY - 10, 20, 20);
  });
};

3. 方案二：重写刻度绘制钩子（推荐） #

这种方式可以让图标在仪表盘更新时自动重新绘制，更适合动态场景：

// 先加载图标
var customIcon = new Image();
customIcon.src = 'your-icon.png';

var opts = {
  // ... 其他基础配置
  // 重写drawTick方法，自定义刻度绘制逻辑
  drawTick: function(ctx, tickAngle, tickLength, tickWidth, tickColor) {
    // 先绘制默认的刻度线
    var centerX = this.config.width / 2;
    var centerY = this.config.height / 2;
    var gaugeRadius = this.config.radius;

    ctx.strokeStyle = tickColor;
    ctx.lineWidth = tickWidth;
    ctx.beginPath();
    ctx.moveTo(
      centerX + (gaugeRadius - tickLength) * Math.cos(tickAngle),
      centerY + (gaugeRadius - tickLength) * Math.sin(tickAngle)
    );
    ctx.lineTo(
      centerX + gaugeRadius * Math.cos(tickAngle),
      centerY + gaugeRadius * Math.sin(tickAngle)
    );
    ctx.stroke();

    // 图标加载完成后，绘制自定义图标
    if (customIcon.complete) {
      var iconX = centerX + (gaugeRadius + 15) * Math.cos(tickAngle);
      var iconY = centerY + (gaugeRadius + 15) * Math.sin(tickAngle);
      ctx.drawImage(customIcon, iconX - 10, iconY - 10, 20, 20);
    }
  }
};

// 初始化仪表盘
var target = document.getElementById('guage');
var gauge = new Gauge(target).setOptions(opts);
gauge.set(5);

注意事项 #

• 确保图标路径正确，若使用跨域图标需要配置 Canvas 的跨域权限。
• 可以根据刻度值绘制不同图标：在遍历刻度时，通过tickText判断，加载对应的图标即可。
• 图标大小、偏移量可以根据你的仪表盘尺寸灵活调整，比如修改(gaugeRadius + 15)中的15来调整偏移距离，修改20,20来调整图标大小。

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