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 相关文章推荐
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
原生js实现弹幕效果
Nov 29 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 程序员也要学会使用“异常”
2009/06/16 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
巧用canvas
2017/01/21 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
Python中isnumeric()方法的使用简介
2015/05/19 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
python实现媒体播放器功能
2018/02/11 Python
Django之PopUp的具体实现方法
2019/08/31 Python
使用python实现kNN分类算法
2019/10/16 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
员工年度工作总结2015
2015/05/18 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python