Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Canvas</title>
- <style>
- canvas {
- border: 1px solid #000;
- }
- </style>
- </head>
- <body>
- <canvas id="mycanvas" width="500" height="300"></canvas>
- <script src="js/jquery-3.2.1.min.js"></script>
- <script>
- var c = document.getElementById("mycanvas");
- var ctx = c.getContext("2d");
- var x = c.width; //canvas 넓이
- var y = c.height; //canvas 높이
- var xc = x / 2; //canvas 가로 중앙
- var yc = y / 2; //canvas 세로 중앙
- var r = yc; //canvas 반지름
- //DB에서 데이터 가져와서 그래프 그리기
- var data = [];
- var title = [];
- var color = [];
- $.getJSON("getdata.php",function(json){
- if( ! json ) return;
- for( i=0; i<json.length; i++) {
- data[i] = json[i].val;
- title[i] = json[i].title;
- color[i] = json[i].color;
- }
- var total = 0;
- for( var j=0; j < data.length; j++) {
- total += Number(data[j]);
- }
- var start = 0;
- var end = 0;
- var pi = 2 * Math.PI;
- for( var k=0; k<data.length; k++){
- ctx.beginPath();
- ctx.moveTo(xc,yc);
- var percent = data[k] / total;
- end = start + ( pi * percent );
- ctx.fillStyle = color[k];
- ctx.arc(xc,yc,r,start,end);
- ctx.moveTo(xc,yc);
- ctx.fill();
- var ac = start + ( pi*(percent/2) );
- var pos = getTitlePos(xc,yc,r/2,ac);
- ctx.fillStyle = "black";
- ctx.font = "15px";
- ctx.textAlign = "center";
- ctx.fillText(title[k], pos[0], pos[1]);
- start = end;
- }
- });
- function getTitlePos(x,y,r,ac) {
- var tx = x + Math.cos(ac)*r;
- var ty = y + Math.sin(ac)*r;
- return [tx, ty];
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement