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 在线压缩和格式化收藏
Jan 16 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 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执行zip与rar解压缩方法实现代码
2010/12/05 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
php微信公众号开发之简答题
2018/10/20 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
pyqt和pyside开发图形化界面
2014/01/22 Python
python编写暴力破解FTP密码小工具
2014/11/19 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python中的变量如何开辟内存
2018/06/26 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
python实现小世界网络生成
2019/11/21 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
最新创业融资计划书
2014/01/19 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
师德师风自查材料
2014/10/14 职场文书
解除施工合同协议书
2014/10/17 职场文书
办公室岗位职责范本
2015/04/11 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
python周期任务调度工具Schedule使用详解
2021/11/23 Python