HTML5,CSS3,JS绘制饼图
饼图是数据表格中⾮常常⽤的⼀种图形，这⾥所实现的是2D的饼图。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pie Chart</title>
<style>
div
{
css和html和js怎么结合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">
//画圆的函数
//设置数据数组和颜⾊数组（颜⾊数组要⾜够⼤，要么就再画的时候进⾏取余运算，防⽌溢出，数据数组要满⾜和为100，否则圆不全）var data = ElementById('data').value.split(',');
var color = ElementById('color').value.split(',');
//得到画布
var canvas = ElementById("PieChart");
//这⾥是2D的画笔
var ctx = Context("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();
//回到圆⼼
/
/画扇形（参数【圆⼼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>