亚洲影库,国产成人啪精品午夜在线观看 ,手机看片日韩国产一区二区

Html5餅圖繪制（統計圖）

admin

2017年4月7日 15:18 本文熱度 6658

HTML5提供了強大的繪圖API，讓我們能夠使用JavaScript輕松繪制各種圖形。本文將主要講解使用Html5繪制餅圖（統計圖）的方法。先看一下餅圖效果：

全部代碼如下：

[html] view plaincopy
 
<!DOCTYPE html>  
<html>  
    <head>  
        <title>Canvas測試</title>  
        <meta charset="gbk">  
        <script>  
            //繪制餅圖  
            function drawCircle(canvasId, data_arr, color_arr, text_arr)  
            {  
                var c = document.getElementById(canvasId);  
                var ctx = c.getContext("2d");  
  
                var radius = c.height / 2 - 20; //半徑  
                var ox = radius + 20, oy = radius + 20; //圓心  
  
                var width = 30, height = 10; //圖例寬和高  
                var posX = ox * 2 + 20, posY = 30;   //  
                var textX = posX + width + 5, textY = posY + 10;  
  
                var startAngle = 0; //起始弧度  
                var endAngle = 0;   //結束弧度  
                for (var i = 0; i < data_arr.length; i++)  
                {  
                    //繪制餅圖  
                    endAngle = endAngle + data_arr[i] * Math.PI * 2; //結束弧度  
                    ctx.fillStyle = color_arr[i];  
                    ctx.beginPath();  
                    ctx.moveTo(ox, oy); //移動到到圓心  
                    ctx.arc(ox, oy, radius, startAngle, endAngle, false);  
                    ctx.closePath();  
                    ctx.fill();  
                    startAngle = endAngle; //設置起始弧度  
  
                    //繪制比例圖及文字  
                    ctx.fillStyle = color_arr[i];  
                    ctx.fillRect(posX, posY + 20 * i, width, height);  
                    ctx.moveTo(posX, posY + 20 * i);  
                    ctx.font = 'bold 14px 微軟雅黑';    //斜體 30像素 微軟雅黑字體  
                    ctx.fillStyle = color_arr[i]; //"#000000";  
                    var percent = text_arr[i] + "：" + 100 * data_arr[i] + "%";  
                    ctx.fillText(percent, textX, textY + 20 * i);  
                }  
            }  
  
            function init() {  
                //繪制餅圖  
                //比例數據和顏色  
                var data_arr = [0.05, 0.25, 0.6, 0.1];  
                var color_arr = ["#00FF21", "#FFAA00", "#00AABB", "#FF4400"];  
                var text_arr = ["第一季度", "第二季度", "第三季度", "第四季度"];  
  
                drawCircle("canvas_circle", data_arr, color_arr, text_arr);  
            }  
  
            //頁面加載時執行init()函數  
            window.onload = init;  
        </script>  
    </head>  
    <body>  
        <h3>HTML5繪制餅圖演示</h3>  
        <p>  
            <canvas id="canvas_circle" width="500" height="300" style="border:2px solid #0026ff;" >  
                瀏覽器不支持canvas  
            </canvas>  
        </p>  
    </body>  
</html>  

這個函數可以直接使用，如果想做的更漂亮，可以增加一些額外的美觀繪制。

本代碼最大的靈活性是將繪制參數與繪制代碼分離，餅圖大小根據Canvas容器高度自動調整。傳遞參數方式如下：

[javascript] view plaincopy
 
var data_arr = [0.05, 0.25, 0.6, 0.1]; //比例數據  
var color_arr = ["#00FF21", "#FFAA00", "#00AABB", "#FF4400"]; //顏色  
var text_arr = ["第一季度", "第二季度", "第三季度", "第四季度"]; //文字  
//繪制餅圖  
drawCircle("canvas_circle", data_arr, color_arr, text_arr);  

如有錯誤歡迎指正！

本文歡迎轉載，代碼可以隨意傳播和使用！

該文章在 2017/4/7 15:19:55 編輯過

關鍵字查詢

統計

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

Html5餅圖繪制（統計圖）