Html 5円グラフ描画(統計図)

Html 5は強力な図面APIを提供し、javascriptを使用して様々な図形を簡単に描くことができます.ここでは主にHTML 5を使って円グラフ(統計図)を描く方法について説明します.まず餅図の効果を見てみましょう.
この図は動的に生成され,入力されたスケールパラメータ(配列)に基づいて餅図を動的に描画する.円グラフの大きさも高さに応じて動的に調整されます.
すべてのコードは次のとおりです.

    
        
        
        
            //    
            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 12px     ';    //   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;
        
    
    
        
HTML5      
        

            
                      canvas
            
        
    

この関数は直接使用することができ、もっときれいにしたい場合は、追加の美しい描画を追加することができます.
このコードの最大の柔軟性は、ペイントパラメータをペイントコードから分離することです.円グラフのサイズはCanvasコンテナの高さに応じて自動的に調整されます.パラメータの伝達方法は次のとおりです.

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);

間違いがあれば指摘してください.
本文は転載を歓迎して、コードは勝手に伝播して使用することができます!