如何将自定义图标添加到 Gauge

Question

我正在使用gauge.js 库，我需要向仪表条添加自定义图标。

var opts = { };
var target = document.getElementById('guage');
var gauge = new Gauge(target).setOptions(opts);

gauge.set(50); // set actual value

<script src="https://cdnjs.cloudflare.com/ajax/libs/gauge.js/1.3.5/gauge.min.js"></script>
<canvas id="guage" data-type="radial-gauge" 
  data-width="500" data-height="500"
  data-min-value="0" data-max-value="10"
  data-exact-ticks="true" data-major-ticks="1,2,3,4,5,6,7,8,9,10" data-minor-ticks="2"
  data-highlights="0">
</canvas>

---

进度图片

---

我想要这样

Answer 1

它没有记录，但是通过研究render 方法，您似乎可以覆盖它。

您可以创建自己的标签渲染器。

警告：当然，由于您是在现有渲染器之上进行渲染，因此符号将出现在仪表指针上方。如果你真的想解决这个问题，你需要重写整个方法并添加一个自定义的 mixin 调用来调用你自己的函数以使其可扩展。

var opts = {
  angle: 0,
  radius : 50,
  limitMax: true,
  limitMin: true,
  highDpiSupport: true,
  pointer: {
    length: 0.5,
    strokeWidth: 0.08,
    color: '#ADB3B7'
  },
  staticZones: [
     { strokeStyle: '#F96C5A', min: 0, max: 2,  symbol: '−'   /* NEW */ },
     { strokeStyle: '#FED663', min: 2, max: 4,  symbol: '✓−' /* NEW */ },
     { strokeStyle: '#C2D34D', min: 4, max: 6,  symbol: '✓'  /* NEW */ },
     { strokeStyle: '#9CC172', min: 6, max: 8,  symbol: '✓+' /* NEW */ },
     { strokeStyle: '#4AB641', min: 8, max: 10, symbol: '+'  /* NEW */ }
  ],
  symbolSize : 30,     // NEW
  symbolColor : '#DDD' // NEW
};
var target = document.getElementById('guage');
var gauge = new Gauge(target).setOptions(opts);

gauge.render = customLabelRenderer;
gauge.minValue = 0;
gauge.maxValue = 10;
gauge.set(7);

function customLabelRenderer() {
  Gauge.prototype.render.call(this);
  var zones = this.options.staticZones;
  if (zones != null) {
    this.ctx.save();
    var xOffset = this.canvas.width;
    var yOffset = this.canvas.height * 2.25; // Not sure about this.
    var symbolSize = this.options.symbolSize;
    this.ctx.font = symbolSize + 'px Arial';
    this.ctx.fillStyle = this.options.symbolColor;
    for (var i = 0; i < zones.length; i++) {
      var sliceAngle = Math.PI / zones.length * -1;
      var zone = zones[i];
      if (zone.symbol != null) {
        var fontWidth = this.ctx.measureText(zone.symbol).width;
        var tmpRadius = this.radius * this.options.radiusScale;
        var angle = (sliceAngle * (zones.length - i)) - (sliceAngle / 2);
        var labelOffset = this.lineWidth * 2;
        var centerX = xOffset + Math.floor((tmpRadius + labelOffset) * Math.cos(angle));
        var centerY = yOffset + Math.floor((tmpRadius + labelOffset) * Math.sin(angle));
        var xPos = Math.floor(centerX / 2 - fontWidth / 2);
        var yPos = Math.floor(centerY / 2 - symbolSize / 2)
        this.ctx.fillText(zone.symbol, xPos, yPos);
      }
    }
    this.ctx.restore();
  }
}

#guage {
  background: #444;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gauge.js/1.3.5/gauge.min.js"></script>
<canvas id="guage" data-width="500" data-height="500">
</canvas>