javascript使用canvas实现饼状图效果


Posted in Javascript onSeptember 08, 2020

使用canvas写一个饼状图,供大家参考,具体内容如下

javascript使用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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
原生js实现表格循环滚动
Nov 24 Javascript
vue配置多代理服务接口地址操作
Sep 08 #Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 #Javascript
JS删除对象中某一属性案例详解
Sep 08 #Javascript
vue全局使用axios的操作
Sep 08 #Javascript
Vue自定义多选组件使用详解
Sep 08 #Javascript
vue项目中微信登录的实现操作
Sep 08 #Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 #Javascript
You might like
php使用curl打开https网站的方法
2015/06/17 PHP
php使用正则验证中文
2016/04/06 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
json原理分析及实例介绍
2012/11/29 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
Javascript的闭包详解
2014/12/26 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
《灯光》教学反思
2014/02/08 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
电子专业求职信
2014/06/19 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
购房个人委托书范本
2014/10/11 职场文书
小学英语复习计划
2015/01/19 职场文书
搞笑老公保证书
2015/02/26 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
vue使用watch监听属性变化
2022/04/30 Vue.js