jquery - 饼图根据百分比旋转 fiddle css, jquery

Question

我正在创建这个饼图，以显示 Yes 票和 No 票的百分比。只有两个部分，两种颜色。

问题

我让它旋转....投票的百分比是正确的，但饼图没有根据这个百分比旋转....

我做错了什么？也许是馅饼的 css 设置？

我附上了代码片段，这里是 fiddle http://jsfiddle.net/fu8b3jq2/

var red=0;
var blue=0;
var Psum = (red+blue);
var rotation = 0;

$(".VoteMain").on("click",function(){	
if($(this).hasClass("VoteRed")){
	red++;
	Psum = (red+blue);
}
 if($(this).hasClass("VoteBlue")){	
	blue++; 
		Psum = (red+blue);
}



var red_percentage= Math.floor((red/Psum)*100); 
var blue_percentage= 100-red_percentage;

//display percentages
    $(".VoteRed span").text(red_percentage+"% :" +red+" votes");
    $(".VoteBlue span").text(blue_percentage+"% :"+blue+" votes");

	//rotate pieChart
	
	 $(".blue").rotate(blue_percentage);
	
	
});






//function
jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

.pie_container{
	
	margin:40px;
	
	
	
}
.pie{
	
	height:100px;
	width:100px;
	background-image: linear-gradient(to right, blue 50%, red 0);
 qbackground:blue;
	border-radius:50%;
	
	
	
}
.blue{
	
	height:100px;
	width:50px;
	background:blue;
	float:right;
	
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
  transform-origin: 0% 50%;
transform: rotate(0deg);
}
.red{
	
	height:100px;
	width:50px;
	background:red;
	float:right;
	
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
  transform-origin: 0% 50%;
transform: rotate(0deg);
}

.VoteMain{cursor:pointer;}

<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="blue"></div>
<div class="red"></div>

</div>

<div class="PollVoteMain">
<div class="VoteMain VoteBlue">blue <span>0</span></div>
<div class="VoteMain VoteRed">red <span>0</span></div>

</div>


</div>

Answer 1

https://canvasjs.com/html5-javascript-pie-chart/

希望对您有所帮助FIDDLE :

var red=0;
var blue=0;
var Psum = (red+blue);
var blue_percentage=0;
var red_percentage=0;

function doIt(blue, red, Psum){

	var red_percentage = Math.floor((red/Psum)*100); 
	var blue_percentage = 100-red_percentage;

	$('.percentages').text(
		'blue: '+blue_percentage+'% - red: '+red_percentage+'%'
	);



	var chart = new CanvasJS.Chart("chartContainer", {
		//animationEnabled: true,
		//title: {
		//	text: "Desktop Search Engine Market Share - 2016"
		//},
		data: [{
			type: "pie",
			startAngle: 240,
			yValueFormatString: "##0.00\"%\"",
			indexLabel: "{label} {y}",
			dataPoints: [
				{y: blue_percentage, label: "blue"},
				{y: red_percentage, label: "red"},
				//{y: 7.06, label: "purple"},
				//{y: 4.91, label: "orange"},
				//{y: 1.26, label: "green"}
			]
		}]
	});
	chart.render();

}

$('.btn-blue, .btn-red').on('click', function(){

	if($(this).hasClass('btn-blue')){
		blue++; 
		Psum = (red+blue);
	}
	if($(this).hasClass('btn-red')){
		red++;
		Psum = (red+blue);
	}
	
	doIt(blue, red, Psum);
	
	$(".VoteRed span").text(red_percentage+"% :" +red+" votes");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="btn-blue">blue</button>
<button class="btn-red">red</button>
<span class="percentages">blue: 0%, red: 0%</span>

<div id="chartContainer" style="height: 160px; width: 100%;">
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>