Question

有一个评级，但由于一些奇怪的原因，评级不能正常填写。也就是说，它是完全填满的，我需要填充发生，如整数和分数。可能是什么问题呢？提前谢谢你。我的英文不好

＆＃13;

(function($) {
  $.fn.percentPie = function(options) {
    var settings = $.extend({
      width: 100,
      trackColor: "EEEEEE",
      barColor1: "777777",
      barColor2: "777777",
      barWeight: 30,
      animateText: true,
      startPercent: 0,
      fps: 60
    }, options);

    var $this = $(this);
    var $percentage = $this;
    var $progressCount = $percentage.find('.tag');
    var prating = $percentage.find('.ratingplus').text();
    var pvotenum = $percentage.find('span[id]:last').text();
    var $progressCount = $percentage.find('.rateshow');
    var percentageProgress = (Math.round((pvotenum - (pvotenum - prating) / 2) / pvotenum * 100)) / 10;

    this.css({
      width: settings.width,
      height: settings.width
    });

    var that = this,
      hoverPolice = false,
      canvasWidth = settings.width,
      canvasHeight = canvasWidth,
      id = $('canvas').length,
      canvasElement = $('<canvas id="' + id + '" width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>'),
      canvas = canvasElement.get(0).getContext("2d"),
      centerX = canvasWidth / 2,
      centerY = canvasHeight / 2,
      radius = settings.width / 2 - settings.barWeight / 2;
    counterClockwise = false,
      fps = 1000 / settings.fps / 2,
      update = .01;
    this.angle = settings.startPercent;


    this.drawArc = function(startAngle, percentFilled, color1, color2) {
      var drawingArc = true;
      canvas.beginPath();
      canvas.arc(centerX, centerY, radius, (Math.PI / 180) * (startAngle * 360 - 90), (Math.PI / 180) * (percentFilled * 360 - 90), counterClockwise);
      var grd = canvas.createLinearGradient(0, 0, settings.width, 0);
      grd.addColorStop(0, color1);
      grd.addColorStop(1, color2);
      canvas.strokeStyle = grd;
      canvas.lineWidth = settings.barWeight;
      canvas.stroke();

      drawingArc = false;
    }

    this.fillChart = function(stop) {
      if (settings.animateText == true) {
        $({
          numberValue: 0
        }).animate({
          numberValue: percentageProgress
        }, {
          duration: fps * 100,
          easing: 'linear',
          step: function() {
            $progressCount.text(Math.ceil(this.numberValue) + '/10');
          }
        });
      } else {
        $progressCount.text(percentageProgress + '/10');
      }

      var loop = setInterval(function() {
        hoverPolice = true;
        canvas.clearRect(0, 0, canvasWidth, canvasHeight);

        that.drawArc(0, 360, settings.trackColor, settings.trackColor);
        that.angle += update;
        that.drawArc(settings.startPercent, that.angle, settings.barColor1, settings.barColor2);

        if (that.angle > stop) {
          clearInterval(loop);
          hoverPolice = false;
        }
      }, fps);

    }

    this.fillChart(percentageProgress);
    this.append(canvasElement);
    return this;
  }
}(jQuery));

$(document).ready(function() {
  $('.safari').percentPie({
    width: 100,
    trackColor: "#444444",
    barColor1: "#22d31f",
    barColor2: "#d36a1f",
    barWeight: 10,
    animateText: false,
    fps: 60
  });
});

＆＃13;

.chart {
  position: relative;
  margin: 30px auto 0 auto;
}
.rateshow {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 43%;
  color: #777777;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="safari chart">
  <span class="rateshow">
    <span id="ratig-layer-10" class="ignore-select">
      <span class="ratingplus">+22</span>
  </span>
  <span id="vote-id">
      <span rel="1"></span>
  32
  </span>
  </span>
</div>

＆＃13;

如果您使用计算公式，则评级正确填写，这里有一小部分打印不正确

＆＃13;

(function($){
    $.fn.percentPie = function(options){

        var settings = $.extend({
            width: 100,
            trackColor: "EEEEEE",
            barColor1: "777777",
            barColor2: "777777",
            barWeight: 30,
            animateText : true,
            startPercent: 0,
            fps: 60
        }, options);


        var $this = $(this);
        var $percentage = $this;
        var $progressCount = $percentage.find('.tag');
        var prating = $percentage.find('.ratingplus').text();
        var pvotenum = $percentage.find('span[id]:last').text();
        var $progressCount = $percentage.find('.rateshow');
        var percentageProgress = (Math.round((pvotenum - (pvotenum - prating) / 2) / pvotenum * 100)) / 100; 

  

        this.css({
            width: settings.width,
            height: settings.width
        });

        var that = this,
            hoverPolice = false,
            canvasWidth = settings.width,
            canvasHeight = canvasWidth,
            id = $('canvas').length,
            canvasElement = $('<canvas id="'+ id +'" width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>'),
            canvas = canvasElement.get(0).getContext("2d"),
            centerX = canvasWidth/2,
            centerY = canvasHeight/2,
            radius = settings.width/2 - settings.barWeight/2;
            counterClockwise = false,
            fps = 1000 / settings.fps/2,
            update = .01;
            this.angle = settings.startPercent;

          
        this.drawArc = function(startAngle, percentFilled, color1, color2){
            var drawingArc = true;
            canvas.beginPath();
            canvas.arc(centerX, centerY, radius, (Math.PI/180)*(startAngle * 360 - 90), (Math.PI/180)*(percentFilled * 360 - 90), counterClockwise);
            var grd = canvas.createLinearGradient(0,0,settings.width,0);
            grd.addColorStop(0, color1);
            grd.addColorStop(1, color2);
            canvas.strokeStyle = grd;
            canvas.lineWidth = settings.barWeight;
            canvas.stroke();
          
            drawingArc = false;
        }

        this.fillChart = function(stop){
            if(settings.animateText == true){
              $({numberValue: 0}).animate({numberValue: percentageProgress *10}, {
                  duration: fps*100,
                  easing: 'linear',
                  step: function() {           
                    $progressCount.text( Math.ceil(this.numberValue) + '/10');
                  }
              });
            }else{
                 $progressCount.text( percentageProgress + '/10');
            }
          
            var loop = setInterval(function(){
                hoverPolice = true;
                canvas.clearRect(0, 0, canvasWidth, canvasHeight);

                that.drawArc(0, 360, settings.trackColor, settings.trackColor);
                that.angle += update;
                that.drawArc(settings.startPercent, that.angle, settings.barColor1, settings.barColor2);

                if(that.angle > stop){
                    clearInterval(loop);
                    hoverPolice = false;
                }
            }, fps);
          
        }

        this.fillChart(percentageProgress);
        this.append(canvasElement);
        return this;
    }
}(jQuery));

$(document).ready(function() {

  $('.safari').percentPie({
        width: 100,
        trackColor: "#444444",
        barColor1: "#22d31f",
        barColor2: "#d36a1f",
        barWeight: 10,
        animateText : false,
        fps: 60
    });

});

＆＃13;

.chart {
  position:relative;
  margin:30px auto 0 auto;
}
.rateshow {
  width:100%;
  text-align:center;
  position:absolute;
  top:43%;
  color:#777777;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="safari chart">
		  <span class="rateshow">
        <span id="ratig-layer-10" class="ignore-select">
            <span class="ratingplus">+22</span>
        </span>
        <span id="vote-id">
          <span rel="1"></span>
          32
        </span>
		  </span>
</div>

＆＃13;

Answer 1

这里：

var percentageProgress = (Math.round((pvotenum - (pvotenum - prating) / 2) / pvotenum * 100)) / 100;

你将它除以100。所以现在你必须将它乘以10：

else {
        $progressCount.text((percentageProgress*10) + '/10');
}

现在应该工作

未评级运行，如何修复？

1 个答案: