bernii/gauge.js

How to Remove the Black Point in Left Corner , Gauge

Opened this issue · 2 comments

It is because in the function Gauge.prototype.setOptions the GaugePointer is rendered.
You need to override this function and remove the line which render the GaugePointer.
In your code in any of your common js you can put the following code:

Gauge.prototype.setOptions = function (options) {
  var gauge, j, len, phi, ref;

  if (options == null) {
    options = null;
  }

  Gauge.__super__.setOptions.call(this, options);

  this.configPercentColors();
  this.extraPadding = 0;

  if (this.options.angle < 0) {
    phi = Math.PI * (1 + this.options.angle);
    this.extraPadding = Math.sin(phi);
  }

  this.availableHeight = this.canvas.height * (1 - this.paddingTop - this.paddingBottom);
  this.lineWidth = this.availableHeight * this.options.lineWidth;
  this.radius = (this.availableHeight - this.lineWidth / 2) / (1.0 + this.extraPadding);
  this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  ref = this.gp;

  for (j = 0, len = ref.length; j < len; j++) {
    gauge = ref[j];
    gauge.setOptions(this.options.pointer);
    // gauge.render(); Line deleted which will fix your problem !!!!
  }

  this.render();
  return this;
};
vrosu commented

This is one of the things were totally not clear for me, because of the lack of actual examples. What I did was to inspect the main project page project page, and there I found out that whenever you're setting options, the called sequence is:
demoGauge.setOptions(opts);
demoGauge.ctx.clearRect(0, 0, demoGauge.ctx.canvas.width, demoGauge.ctx.canvas.height);
demoGauge.render();

Sooo, I'm not sure if this is a bug, or the way the library is meant to work 🤔?