bernii / gauge.js

100% native and cool looking JavaScript gauge
MIT License
1.42k stars 391 forks source link

How to Remove the Black Point in Left Corner , Gauge #192

Open ShueUmana opened 5 years ago

ShueUmana commented 5 years ago

image

abdelhakim-atmani commented 5 years ago

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 4 years ago

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 🤔?