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获得内容和属性示例代码
Jan 16 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
Vue中实现权限控制的方法示例
Jun 07 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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
网站当前的在线人数
2006/10/09 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
Python中的十大图像处理工具(小结)
2019/06/10 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
车间组长岗位职责
2013/12/20 职场文书
亲子读书活动方案
2014/02/22 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
nginx安装以及配置的详细过程记录
2021/09/15 Servers
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL