2016-11-29 23 views
-3

有一个评级,但由于一些奇怪的原因,该评级不能正常填充。 也就是说,它是完全填充的,我需要填充发生,如整数和小数。可能是什么问题呢?感谢您在advance.Sorry我的英文不好未评级的跑步,如何解决?

(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 
 
    }); 
 
});
.chart { 
 
    position: relative; 
 
    margin: 30px auto 0 auto; 
 
} 
 
.rateshow { 
 
    width: 100%; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 43%; 
 
    color: #777777; 
 
}
<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>

如果您使用的计算公式,收视率是正确填写,这里是打印的分数是不正确的

(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 
 
    }); 
 

 
});
.chart { 
 
    position:relative; 
 
    margin:30px auto 0 auto; 
 
} 
 
.rateshow { 
 
    width:100%; 
 
    text-align:center; 
 
    position:absolute; 
 
    top:43%; 
 
    color:#777777; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="safari chart"> 
 
\t \t <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> 
 
\t \t </span> 
 
</div>

+0

所以在第二个,乘以10呢? '$ progressCount.text((percentageProgress * 10)+'/ 10');' – epascarello

+0

非常感谢。现在的问题是,如果你把“animateText:true”这个排名显示不正确 – StarFlow

回答

1

这里:

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

您将它除以100。所以,现在你必须10这里相乘:

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

现在应该工作

+0

非常感谢。现在的问题是,如果你把“animateText:true” 该排名显示不正确 – StarFlow

+0

请告诉我请问是什么原因? – StarFlow