Closed ngzhihua closed 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?
Solved the problem by importing icon at the start of file.
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. }
Suspect there might be some timing issue, icon not loaded before canvas is rendered, etc. Any ideas?