饼图根据百分比旋转提琴css，jquery

Question

I'm creating this pie chart, to display the percentage of Yes votes, against No votes..two sections only, two colors.

PROBLEM

I make it rotate.... the percentages of votes are correct, but the pie chart doesnt rotate according this percentages....

What am I doing wrong? The css setting of the pie maybe?

I attach the code snippet & here the 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/

hope this can help you 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>