bernii / gauge.js

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

Gauge icon not showing when animation speed is fast ( <<32) #204

Closed ngzhihua closed 5 years ago

ngzhihua commented 5 years ago

Hi I have a react application integrated with GaugeJs.

These are my options: var opts = { angle: -0.5, // The span of the gauge arc lineWidth: 0.13, // The line thickness radiusScale: 0.68, // Relative radius lines: 1, pointer: { iconPath: "arrow90.png", iconScale: 0.09, length: 0.37, // // Relative to gauge radius strokeWidth: 0.03, // The thickness color: "#ffffff" // Fill color }, limitMax: false, limitMin: false, strokeColor: "#E0E0E0", generateGradient: true, highDpiSupport: true, // High resolution support staticLabels: { font: "60% Calibri", // Specifies font labels: [0, this.props.fixedZones[0], this.props.fixedZones[1]], // Print labels at these values color: "#000000", // Optional: Label text color fractionDigits: 0 // Optional: Numerical precision. 0=round off. }

var target = document.getElementById(this.props.id + "gauge");
var gauge = new Gauge(target);
// gauge.animationSpeed = 1;
gauge.setMinValue = 0;
gauge.maxValue = maxPercent;
gauge.set(Number(this.props.stats));
gauge.setOptions(opts);
var textRenderer = new TextRenderer(
  document.getElementById(this.props.id + "label")
);
textRenderer.render = function(gauge) {
  this.el.innerHTML = gauge.displayedValue + "%";
};
gauge.setTextField(textRenderer);
this.gauge = gauge;
// this.textRenderer = textRenderer;
this.opts = opts;
this.target = target;

Suspect there might be some timing issue, icon not loaded before canvas is rendered, etc. Any ideas?

ngzhihua commented 5 years ago

Solved the problem by importing icon at the start of file.