Preciso de um socorro com um código. No Stackoverflow gringo, consegui um código que estava procurando a um tempo e só achava pago. Que no caso é o Chart Gauge.
O problema que estou encontrando é que ele não reconhece números com casas decimais após a virgula. Quando eu coloco um valor por exemplo: 3.5 ele arredonda para 4 e não mostra onde esta o valor 3.4 e nem a seta vai para 3.5 e sim para 4 (arredonda).
Gostaria de saber se alguém pode me ajudar com o código. Já revirei e não dei conta. Sou amador em JS ainda. Por favor se alguém puder ajuda
/// ### ---- ### sample level workaround ### ---- ### ///
var fn1 = $.fn.roundSlider.prototype._setProperties;
$.fn.roundSlider.prototype._setProperties = function () {
fn1.apply(this);
var o = this.options, r = o.radius, d = r * 2,
r1 = r - (o.width / 2) - this._border(true),
svgNS = "http://www.w3.org/2000/svg";
this._circum = Math.PI * (r1 * 2);
var $svg = $(document.createElementNS(svgNS, "svg"));
$svg.attr({ "height": d, "width": d });
this.$circle = $(document.createElementNS(svgNS, 'circle')).attr({
"fill": "transparent", "class": "rs-transition", "cx": r, "cy": r, "r": r1,
"stroke-width": o.width, "stroke-dasharray": this._circum
}).addClass("path-bg");
this._setDashOffset(this.$circle, this.options.counterClockwise ? this._start : this._end);
$svg.append(this.$circle);
this.$svg_box = $(document.createElement("div")).addClass("rs-transition rs-svg").append($svg).css({
"height": d, "width": d, "transform-origin": "50% 50%",
"transform": "rotate(" + (o.startAngle + 180) + "deg)"
}).appendTo(this.innerContainer);
}
$.fn.roundSlider.prototype._setDashOffset = function ($ele, deg) {
var flagValue = this.options.counterClockwise ? 0 : 1;
var pct = (flagValue - (deg / 360)) * this._circum;
$ele.css({ strokeDashoffset: pct });
}
/// ### ---- ### --------------------- ### ---- ### ///
$("#slider").roundSlider({
//showTooltip: false,
circleShape: "half",
width: 16,
radius: 125,
value: 60,
handleSize: "24,6"
});
.slider_container {
display: inline-block;
}
.rs-border {
border-width: 0px;
}
.rs-control .rs-range-color,
.rs-control .rs-path-color,
.rs-control .rs-bg-color {
background-color: transparent;
}
.rs-control circle.path-bg {
stroke: url(#gradient1);
stroke-dashoffset: 0 !important;
stroke-dasharray: 24 14.1;
}
.slider_label {
margin-top: 4px;
}
.minl {
float: left;
color: #66cc33;
}
.maxl {
float: right;
color: #cc0000;
}
.rs-tooltip-text {
font-size: 34px;
color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.3/roundslider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.3/roundslider.min.js"></script>
<h2><a target="_blank" href="http://roundsliderui.com/">roundSlider - v1.3.3</a></h2>
<div class="slider_container">
<!-- define your gradient values here -->
<svg width="0" height="0">
<defs>
<linearGradient id="gradient1">
<stop offset="0%" stop-color="#cc0000"/>
<stop offset="25%" stop-color="#ff6600"/>
<stop offset="50%" stop-color="orange"/>
<stop offset="75%" stop-color="#FFFf00"/>
<stop offset="100%" stop-color="#66cc33"/>
</linearGradient>
</defs>
</svg>
<div id="slider"></div>
<div class="slider_label">
<div class="minl">LOW</div>
<div class="maxl">HIGH</div>
</div>
</div>