HTML5,CSS3,JS繪製餅圖

時間 2019-12-14

標籤 html5 html css3 css 繪製餅圖欄目 HTML5 简体版

原文原文鏈接

有同窗問我相關的東西，隨便寫個例子發上來，這裏所實現的是2D的餅圖。javascript

<!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>