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中获取选中对象的类型
Apr 02 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
jQuery原生的动画效果
Jul 10 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 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
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
php利用事务处理转账问题
2015/04/22 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
python实现ip查询示例
2014/03/26 Python
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
python中的协程深入理解
2019/06/10 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
python程序文件扩展名知识点详解
2020/02/27 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
Linux如何压缩可执行文件
2014/03/27 面试题
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
企业道德讲堂实施方案
2014/03/19 职场文书
开工仪式主持词
2014/03/20 职场文书
实习推荐信
2014/05/10 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
酒店前台岗位职责
2015/04/16 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers