Advertisement
asimryu

canvas pie chart json data from db

Nov 21st, 2017
188
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.71 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Canvas</title>
  6.     <style>
  7.         canvas {
  8.             border: 1px solid #000;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <canvas id="mycanvas" width="500" height="300"></canvas>
  14.     <script src="js/jquery-3.2.1.min.js"></script>
  15.     <script>
  16.         var c = document.getElementById("mycanvas");
  17.         var ctx = c.getContext("2d");
  18.         var x = c.width; //canvas 넓이
  19.         var y = c.height; //canvas 높이
  20.         var xc = x / 2; //canvas 가로 중앙
  21.         var yc = y / 2; //canvas 세로 중앙
  22.         var r = yc; //canvas 반지름
  23.  
  24.         //DB에서 데이터 가져와서 그래프 그리기
  25.         var data = [];
  26.         var title = [];
  27.         var color = [];
  28.         $.getJSON("getdata.php",function(json){
  29.                 if( ! json ) return;
  30.                 for( i=0; i<json.length; i++) {
  31.                     data[i] = json[i].val;
  32.                     title[i] = json[i].title;
  33.                     color[i] = json[i].color;
  34.                 }      
  35.                 var total = 0;
  36.                 for( var j=0; j < data.length; j++) {
  37.                     total += Number(data[j]);
  38.                 }
  39.                 var start = 0;
  40.                 var end = 0;
  41.                 var pi = 2 * Math.PI;
  42.  
  43.                 for( var k=0; k<data.length; k++){
  44.                     ctx.beginPath();
  45.                     ctx.moveTo(xc,yc);
  46.                     var percent = data[k] / total;
  47.                     end = start + ( pi * percent );
  48.                     ctx.fillStyle = color[k];
  49.                     ctx.arc(xc,yc,r,start,end);
  50.                     ctx.moveTo(xc,yc);
  51.                     ctx.fill();
  52.                     var ac = start + ( pi*(percent/2) );
  53.                     var pos = getTitlePos(xc,yc,r/2,ac);
  54.                     ctx.fillStyle = "black";
  55.                     ctx.font = "15px";
  56.                     ctx.textAlign = "center";
  57.                     ctx.fillText(title[k], pos[0], pos[1]);
  58.                     start = end;   
  59.                 }
  60.         });
  61.  
  62.  
  63.         function getTitlePos(x,y,r,ac) {
  64.             var tx = x + Math.cos(ac)*r;
  65.             var ty = y + Math.sin(ac)*r;
  66.             return [tx, ty];
  67.         }
  68.  
  69.     </script>
  70. </body>
  71. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement