JavaScript canvas基于数组生成柱状图代码实例


Posted in Javascript onMarch 06, 2020

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域,您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

canvas柱状图

var arr = [
  { id: 1001, price: 100 },
  { id: 1002, price: 150 },
  { id: 1003, price: 200 },
  { id: 1004, price: 70 },
  { id: 1005, price: 300 }
 ];
 var gap = 20;
 var canvas = document.querySelector("canvas");
 var ctx;
 init();
 function init() {
  canvas.width = 400;
  canvas.height = 300;
  ctx = canvas.getContext("2d");
  var max = arr.reduce((value, item) => {
  return value < item.price ? item.price : value;
  }, arr[0].price);
  //max高为300的4/5,其他的高为:300*(4/5)/(max) * h maxh:240 = othersh: ? ? = 240 
  var scaleHeight = 300 * 4 / 5 / max;
  //每个柱状图的宽为总宽-间隙宽除个数
  var width = (400 - (gap * (arr.length + 1))) / arr.length;
  createChart(width, scaleHeight);
 }

 function createChart(w, hs) {
  ctx.fillStyle = "rgba(0,0,0,0.7)";
  ctx.fillRect(0, 0, 400, 300);
  var x = 0;
  for (var i = 0; i < arr.length; i++) {
  x += gap;
  ctx.fillStyle = "orange";
  var h = hs * arr[i].price;
  ctx.fillRect(x, 300 - h, w, h);
  x += w;
  }
 }

效果:

JavaScript canvas基于数组生成柱状图代码实例

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

Javascript 相关文章推荐
Javascript 中介者模式实例
Dec 16 Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
vue 使用 canvas 实现手写电子签名
Mar 06 #Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 #Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 #Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 #Javascript
javascript中可能用得到的全部的排序算法
Mar 05 #Javascript
js的Object.assign用法示例分析
Mar 05 #Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 #Javascript
You might like
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
Python中使用asyncio 封装文件读写
2016/09/11 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
购买一个高级域名:BuyDomains
2018/03/11 全球购物
打架检讨书50字
2014/01/11 职场文书
科级干部考察材料
2014/02/15 职场文书
药店促销活动总结
2014/07/10 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
义诊活动通知
2015/04/24 职场文书
培训计划通知
2015/07/15 职场文书
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技