파이그래프

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pie Chart</title>
    <style>
        table {
            width: 500px;
            border-collapse: collapse;
        }
        table td {
            width: 25%;
            border: 1px solid #666;
            text-align: center;
        }
        table tr:not(:first-child):hover td{
            background-color: red;
            color: white;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>구분</td>
            <td>1월</td>
            <td>2월</td>
            <td>3월</td>
        </tr>
        <tr>
            <td>HTML</td>
            <td>20</td>
            <td>50</td>
            <td>34</td>
        </tr>
        <tr>
            <td>CSS</td>
            <td>30</td>
            <td>10</td>
            <td>5</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>80</td>
            <td>60</td>
            <td>100</td>
        </tr>
    </table>
    <h1 id="title">Chart Area</h1>
    <canvas id="chart" width="500" height="500"></canvas>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        var canvas = document.getElementById("chart");
        var ctx = canvas.getContext("2d");
        var w = canvas.width;
        var h = canvas.height;
        var r = w / 2;
        var x = w / 2;
        var y = h / 2;

        // ctx.beginPath();
        // ctx.fillStyle = "red";
        // ctx.moveTo(x,y);
        // ctx.arc(x,y,r,0,0.5*Math.PI);
        // ctx.fill();

        var colors = ["red","green","blue"];
        var month = ["1월","2월","3월"];

        $("table tr").not(":first").on("mouseover",function(){
            var title = $(this).children("td:first").text();
            $("#title").text(title);
            var tds = $(this).children("td").not(":first");
            var data = [];
            var total = 0;
            for( var i=0; i<tds.length; i++) {
                data[i] = Number( $( tds[i] ).text() );
                total += data[i];
            }

            ctx.clearRect(0,0,w,h);
            var start = 0;

            //반복문으로 파이 그리기
            for( var i=0; i<data.length; i++ ) {
                var pcnt = data[i] / total;
                var end = start + 2*Math.PI*pcnt;
                ctx.beginPath();
                ctx.fillStyle = colors[i];
                ctx.moveTo(x,y);
                ctx.arc(x,y,r,start,end);
                ctx.moveTo(x,y);
                ctx.fill();

                //Label 추가
                var pos = getarc(x,y,r/1.7,start + 2*Math.PI*(pcnt/2));
                ctx.fillStyle = "white";
                ctx.font = "15px Gullim";
                ctx.textAlign = "center";
                ctx.fillText(month[i], pos[0], pos[1]);
                ctx.fillText(data[i], pos[0], pos[1]+18);
                start = end;
            }

        });
        function getarc(x,y,r,angle){
            return [x+Math.cos(angle)*r,y+Math.sin(angle)*r];
        }
    </script>
</body>
</html>