Alterando o data-percentage attribute

[jonasgarreto 0]

Estou tentando implementar o sistema de mostrar % em circulo, o botão de porcentagem funciona perfeitamente, mas apenas alterando os números de data-percent = "50", em outro modelo de botão diferente, eu uso isso style = "width: @ {@ ViewBag.PercentOnline}% "para calcular%, como posso implementar isso em vez da data percentual?

muito obrigado

 

(function(a) {
  a.fn.circliful = function(b, d) {
    var c = a.extend({
      fgcolor: "#556b2f",
      bgcolor: "#eee",
      fill: false,
      width: 15,
      dimension: 200,
      fontsize: 15,
      percent: 50,
      animationstep: 1,
      iconsize: "20px",
      iconcolor: "#999",
      border: "default",
      complete: null
    }, b);
    return this.each(function() {
      var w = ["fgcolor", "bgcolor", "fill", "width", "dimension", "fontsize", "animationstep", "endPercent", "icon", "iconcolor", "iconsize", "border"];
      var f = {};
      var F = "";
      var n = 0;
      var t = a(this);
      var A = false;
      var v, G;
      t.addClass("circliful");
      e(t);
      if (t.data("text") != undefined) {
        v = t.data("text");
        if (t.data("icon") != undefined) {
          F = a("<i></i>").addClass("fa " + a(this).data("icon")).css({
            color: f.iconcolor,
            "font-size": f.iconsize
          })
        }
        if (t.data("type") != undefined) {
          j = a(this).data("type");
          if (j == "half") {
            s(t, "circle-text-half", (f.dimension / 1.45))
          } else {
            s(t, "circle-text", f.dimension)
          }
        } else {
          s(t, "circle-text", f.dimension)
        }
      }
      if (a(this).data("total") != undefined && a(this).data("part") != undefined) {
        var I = a(this).data("total") / 100;
        percent = ((a(this).data("part") / I) / 100).toFixed(3);
        n = (a(this).data("part") / I).toFixed(3)
      } else {
        if (a(this).data("percent") != undefined) {
          percent = a(this).data("percent") / 100;
          n = a(this).data("percent")
        } else {
          percent = c.percent / 100
        }
      }
      if (a(this).data("info") != undefined) {
        G = a(this).data("info");
        if (a(this).data("type") != undefined) {
          j = a(this).data("type");
          if (j == "half") {
            D(t, 0.9)
          } else {
            D(t, 1.25)
          }
        } else {
          D(t, 1.25)
        }
      }
      a(this).width(f.dimension + "px");
      var i = a("<canvas></canvas>").attr({
        width: f.dimension,
        height: f.dimension
      }).appendTo(a(this)).get(0);
      var g = i.getContext("2d");
      var r = i.width / 2;
      var q = i.height / 2;
      var C = f.percent * 360;
      var H = C * (Math.PI / 180);
      var l = i.width / 2.5;
      var B = 2.3 * Math.PI;
      var z = 0;
      var E = false;
      var o = f.animationstep === 0 ? n : 0;
      var p = Math.max(f.animationstep, 0);
      var u = Math.PI * 2;
      var h = Math.PI / 2;
      var j = "";
      var k = true;
      if (a(this).data("type") != undefined) {
        j = a(this).data("type");
        if (j == "half") {
          B = 2 * Math.PI;
          z = 3.13;
          u = Math.PI * 1;
          h = Math.PI / 0.996
        }
      }

      function s(J, x, y) {
        a("<span></span>").appendTo(J).addClass(x).text(v).prepend(F).css({
          "line-height": y + "px",
          "font-size": f.fontsize + "px"
        })
      }

      function D(y, x) {
        a("<span></span>").appendTo(y).addClass("circle-info-half").css("line-height", (f.dimension * x) + "px")
      }

      function e(x) {
        a.each(w, function(y, J) {
          if (x.data(J) != undefined) {
            f[J] = x.data(J)
          } else {
            f[J] = a(c).attr(J)
          }
          if (J == "fill" && x.data("fill") != undefined) {
            A = true
          }
        })
      }

      function m(x) {
        g.clearRect(0, 0, i.width, i.height);
        g.beginPath();
        g.arc(r, q, l, z, B, false);
        g.lineWidth = f.width + 1;
        g.strokeStyle = f.bgcolor;
        g.stroke();
        if (A) {
          g.fillStyle = f.fill;
          g.fill()
        }
        g.beginPath();
        g.arc(r, q, l, -(h), ((u) * x) - h, false);
        if (f.border == "outline") {
          g.lineWidth = f.width + 13
        } else {
          if (f.border == "inline") {
            g.lineWidth = f.width - 13
          }
        }
        g.strokeStyle = f.fgcolor;
        g.stroke();
        if (o < n) {
          o += p;
          requestAnimationFrame(function() {
            m(Math.min(o, n) / 100)
          }, t)
        }
        if (o == n && k && typeof(b) != "undefined") {
          if (a.isFunction(b.complete)) {
            b.complete();
            k = false
          }
        }
      }
      m(o / 100)
    })
  }
}(jQuery));

 

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="circlestat circliful" data-dimension="190" data-width="6" data-fontsize="12" data-percent="50" data-fgcolor="#fff" data-bgcolor="rgba(51, 51, 51, 0)" style="width: 190px;">
  <canvas style="width: 190px; height:190px;"></canvas>
</div>

<script type="text/javascript">
  $(function() {
    $('.circlestat').circliful();
  });
</script>

[jonasgarreto 0]

alguém pode aprovar ? estou esperando ja faz dias