亚洲精品m在线观看,在线你懂的,波多野结衣黑裙丝袜在线,饥渴的少妇视频在线,成人啪精品视频网站午夜,国产的花视频在线观看免费,在线看的免费网站黄2018,嗯啊不要痛一区二区,久久只有这里的精品69,亚洲无AV码一区二区三区

Html5餅圖繪制（統(tǒng)計圖）

admin

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

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

全部代碼如下：

[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;   //結(jié)束弧度  
                for (var i = 0; i < data_arr.length; i++)  
                {  
                    //繪制餅圖  
                    endAngle = endAngle + data_arr[i] * Math.PI * 2; //結(jié)束弧度  
                    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; //設(shè)置起始弧度  
  
                    //繪制比例圖及文字  
                    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() {  
                //繪制餅圖  
                //比例數(shù)據(jù)和顏色  
                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);  
            }  
  
            //頁面加載時執(zhí)行init()函數(shù)  
            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>  

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

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

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

如有錯誤歡迎指正！

本文歡迎轉(zhuǎn)載，代碼可以隨意傳播和使用！

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

關(guān)鍵字查詢

統(tǒng)計

相關(guān)文章

正在查詢...

點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。

點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務(wù)費用、相關(guān)報表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務(wù)都免費，不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。