-3
レーティングがありますが、何らかの奇妙な理由により、レーティングが正しく機能していません。 つまり、完全に塗りつぶされており、塗りつぶす必要があります。何が問題なの？ここでは、正確にあなたが計算式を使用している場合は、私の悪い英語評価されていないラン、修正方法？
(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>、評価が満たされているため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))/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>
を働く10を掛けなければなりませんか？ '$ progressCount.text（（percentageProgress * 10）+ '/ 10'）;' – epascarello
ありがとうございました。今問題は、あなたが "animateText：true"を置くと、ランクが正しく表示されないということです。 – StarFlow