幽灵资源网 Design By www.bzswh.com
使用canvas写一个饼状图，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id='canvas' width='800' height='400' style="border: 1px solid red;"></canvas>
<script>
let data = [
{ title: "服饰1", money: 400 },
{ title: "服饰2", money: 300 },
{ title: "服饰3", money: 400 },
{ title: "服饰4", money: 200 },
{ title: "服饰5", money: 500 },
{ title: "服饰6", money: 180 },
{ title: "服饰7", money: 500 }]
/** @type {HTMLCanvasElement} */
let canvas = document.querySelector("#canvas");
let ctx = canvas.getContext("2d");
let r = 100;
let money = function (obj, sum) {
for (let i = 0; i < obj.length; i++) {
sum += data[i].money
}
return sum;
}
let totalmoney = money(data, 0);
let nowsum = 0;
let start = 0;
let end = 0;
let R = 100;
let i=0;
data.forEach(function (item) {
ctx.beginPath()
nowsum += item.money;
end = (nowsum / totalmoney)
ctx.moveTo(150, 150);
ctx.arc(150, 150, R, start*Math.PI*2, end*Math.PI*2)
start = end;
//产生随机颜色
ctx.fillStyle = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
ctx.rect(350,5+(35*i),30,30);
ctx.font="14px 黑体"
ctx.fillText(item.title,400,25+(35*i))
ctx.strokeStyle = "gray"
ctx.fill();
ctx.stroke();
i++;
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
js,canvas,饼状图
幽灵资源网 Design By www.bzswh.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...