javascript使用canvas实现饼状图效果
更新时间：2020年09月08日 15:12:07 作者：HaiRong_21
这篇文章主要为大家详细介绍了javascript使用canvas实现饼状图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了npm install jquery报错问题解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要介绍了JavaScript动态添加css样式和script标签的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件
这篇文章主要介绍了JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件的相关资料,需要的朋友可以参考下2016-10-10
console.log()、alert() 都是JavaScript中用于在开发过程中输出信息或向用户显示消息的不同方法,它们的主要区别在于目的、使用场景以及展示方式,本文将给大家介绍JavaScript 中怎么看数据返回值,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了原生js和jquery分别实现横向导航菜单效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
JSON与String互转的实现方法(Javascript)
下面小编就为大家带来一篇JSON与String互转的实现方法(Javascript) 。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-09-09
在测试过程中发现alert会中断settimeout的计时功能,关闭对话框后，settimeout的时间会重头开始计时，而不是从中断处，感兴趣的朋友可以了解下2013-07-07
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
本文通过实例代码给大家介绍了BootStrap Table复选框默认选中功能(从数据库获取到对应的状态进行判断是否为选中状态)，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-07-07
这篇文章主要介绍了JsonServer安装及启动过程图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了 Scala解析Json字符串的实例详解的相关资料,希望通过本文能帮助到大家，让大家学习理解这部分内容，需要的朋友可以参考下2017-10-10
最新评论