Question

我在这个饼图上工作......

任何时候我点击红色...圆形绝对定位红色div旋转低于180度的角度，根据投票数量完成另一半...使得模拟此颜色的饼对应于红票的百分比。

问题

当我点击红色按钮时，红色div正确旋转，但是当点击bue时......它没有....

我目前正在测试红色尺寸....所以我想在红色尺寸超过总尺寸50％或更高（直到100％）的情况下完成这项工作，一旦效果很好＆＃ 39;将添加一个蓝色定位div以使蓝色侧相同...

我做错了什么？

＆＃13;

var red=0;
var blue=0;
var Psum = (red+blue);
var r_rotation = 0;
var red_rotacion_control= 0;
$(".VoteMain").on("click",function(){	


if($(this).hasClass("VoteRed")){
	red++;
	Psum = (red+blue);
	red_size_control = "increase_red";
	
}
 if($(this).hasClass("VoteBlue")){	
	blue++; 
		Psum = (red+blue);
	red_size_control = "decrease_red";
}



var red_percentage= Math.floor((red/Psum)*100); 
var blue_percentage= 100-red_percentage;

///old +- new angles?
var sum_rotacion =  (1/(Psum-1) + 1/Psum)*360;
var rest_rotacion =  (1/(Psum-1) - 1/Psum)*360;


//display percentages
    $(".VoteRed span").text(red_percentage+"% :" +red+" votes > Votos Totales "+Psum);
    $(".VoteBlue span").text(blue_percentage+"% :"+blue);

	//rotate pieChart
if(red> blue){
//red mayor	
$(".red").css('z-index', 3000);	
$(".blue").css('z-index', 1);

if(red==Psum){
$(".red").rotate(180);	
}else{


if(red_size_control=="increase_red"){
	r_rotacion=(180-sum_rotacion);
	}else if(red_size_control=="decrease_red"){
		r_rotacion=(180-rest_rotacion);
		}



$(".red").rotate(r_rotacion);
}
	
}
	

	
});



//function
jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

＆＃13;

.pie_container{
	
	margin:40px;

	
}
.pie{
	position:relative;
	height:100px;
	width:100px;
	qbackground:yellow;
	border-radius:50%;
	background-image:linear-gradient(to right, blue 50%, red 0);
	  transform-origin: 50% 50%;
	
}
.blue{
	position:absolute;
	top:0;
	left:0;
	
	height:100px;
	width:50px;
	background:blue;
qborder:1px solid green;
	border-top-left-radius: 50px;
border-bottom-left-radius: 50px;

  transform-origin: 100% 50%;
transform: rotate(0deg);
}
.red{
	position:absolute;
	top:0;
	right:0;
	
	height:100px;
	width:50px;
	background:red;
border:1px solid yellow;
	border-top-right-radius: 50px;
border-bottom-right-radius: 50px;

  transform-origin: 0% 50%;
transform: rotate(0deg);

transition:all 1s ease-out;
}
.red span{
	position:absolute;
	bottom:0;
	left:20px;
}

.VoteMain{cursor:pointer;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="pie_container">

<div class="pie">
<div class="red"><span>b</span></div>
</div>

<div class="PollVoteMain">
<div class="VoteMain VoteBlue"><button>blue</button> <span>0</span></div>
<div class="VoteMain VoteRed"><button>red</button> <span>0</span></div>

</div>


</div>

＆＃13;

Answer 1

您必须将整个旋转计算部分更改为：

$db = mysqli_connect('localhost', 'userdatabase', 'PASSData', 'sftdatabase');
$result = mysqli_query($db,"SELECT imgPath FROM images"); 

$result_array = [];

while($row = mysqli_fetch_assoc($result))
{
    $result_array[] = $row['imgPath'];
}

print_r($result_array);

旋转绝对不是以前的状态

这是一个有效的jsfiddle

增量/减量变换旋转不工作小提琴jquery

1 个答案: