2

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. ChartGauge

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>

1 Resposta 1

1

Olhando a documentação, basta colocar a opção step com um valor decimal (ex., .1) que irá aceitar números decimais:

/// ### ---- ### 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: 3.5,
  handleSize: "24,6",
  step: .1
});
.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>

1
  • 1
    Caramba SAM, que maravilha amigo. Em tão pouco tempo alguém pra ajudar. Te agradeço muito pela força. Ainda bem que existem pessoas como você. Muito obrigado. Abraço Commented 6/11/2019 às 18:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .