HTML5,CSS3,JS绘制饼图

饼图是数据表格中非常常用的一种图形，这里所实现的是2D的饼图。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Pie Chart</title>
        <style>
            div
            {
                padding: 10px;

                /* Internet Explorer 10 */
                display: -ms-flexbox;
                -ms-flex-pack: center;
                -ms-flex-align: center;

                /* Firefox */
                display: -moz-box;
                -moz-box-pack: center;
                -moz-box-align: center;

                /* Safari, Opera, and Chrome */
                display: -webkit-box;
                -webkit-box-pack: center;
                -webkit-box-align: center;

                /* W3C */
                display: box;
                box-pack: center;
                box-align: center;
            }
        </style>
    </head>
    <body>
        <div>
            <label>Input data(Seprate by ','):</label>
            <br>
            <textarea id="data"></textarea>
            <br>
            <label>Input color(Seprate by ','):</label>
            <br>
            <textarea id="color"></textarea>
            <br>
            <button id="Draw">Draw</button>
        </div>
        <div>
            <canvas id="PieChart" width="300" height="300" ></canvas>
        </div>
        <script type="text/javascript">            
            //画圆的函数
            document.getElementById('Draw').onclick = function(){
                //设置数据数组和颜色数组（颜色数组要足够大，要么就再画的时候进行取余运算，防止溢出，数据数组要满足和为100，否则圆不全）
                var data = document.getElementById('data').value.split(',');
                var color = document.getElementById('color').value.split(',');
                //得到画布
                var canvas = document.getElementById("PieChart");
                //这里是2D的画笔
                var ctx = canvas.getContext("2d");
                //起始弧度（0是从水平线开始，1.5 * Math.PI是从圆的最上方开始）
                var startPoint = 0;
                //循环填充
                for(var i = 0 ;i < data.length; i++){
                    //填充色
                    ctx.fillStyle = color[i % color.length];
                    //边框颜色(可以同上，但是就看不到边框了)
                    ctx.strokeStyle = 'white';
                    //开始画图
                    ctx.beginPath();
                    //回到圆心
                    ctx.moveTo(150, 150);
                    //画扇形（参数【圆心X，Y，半径，起始弧度，终点弧度（把终点的值赋给起点），ture是逆时针false是顺时针】）
                    ctx.arc(150, 150, 150, startPoint, startPoint -= Math.PI * 2 * (data[i] / 100), true);
                    //颜色填充
                    ctx.fill();
                    ctx.stroke();
                }
            }
        </script>
    </body>
</html>
posted @ 2014-04-22 12:50  iCH1990  阅读(1263)  评论(0)  编辑  收藏  举报