饼图是数据表格中非常常用的一种图形，这里所实现的是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>