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 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
Jquery之美中不足小结
Feb 16 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
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 远程关机操作的代码
2008/12/05 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
javascript 写类方式之五
2009/07/05 Javascript
Javascript 作用域使用说明
2009/08/13 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
js转html实体的方法
2016/09/27 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
python实现二维码扫码自动登录淘宝
2016/12/27 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
python中pika模块问题的深入探究
2018/10/13 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
简单了解python单例模式的几种写法
2019/07/01 Python
python 读取修改pcap包的例子
2019/07/23 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
Python 如何批量更新已安装的库
2020/05/26 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
J2EE包括哪些技术
2016/11/25 面试题
南京青奥会口号
2014/06/12 职场文书
行政处罚告知书
2015/07/01 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书