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 相关文章推荐
JavaScript实现拼音排序的方法
Nov 20 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
全面解析bootstrap格子布局
May 22 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 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遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
Python3.2中的字符串函数学习总结
2015/04/23 Python
Python栈类实例分析
2015/06/15 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
开源Web应用框架Django图文教程
2017/03/09 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
pytorch 常用线性函数详解
2020/01/15 Python
Python批量启动多线程代码实例
2020/02/18 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
高级编程求职信模板
2014/02/16 职场文书
优秀党员获奖感言
2014/02/18 职场文书
《荷花》教学反思
2014/04/16 职场文书
采购部长岗位职责
2014/06/13 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
人民的好儿女观后感
2015/06/18 职场文书