html5生成柱状图(条形图)效果的实例代码


Posted in HTML / CSS onMarch 25, 2016
XML/HTML Code复制内容到剪贴板
  1. <html>    
  2. <canvas id="a_canvas" width="1000" height="700"></canvas>    
  3. <script>    
  4.     (function (){    
  5.      
  6.         window.addEventListener("load", function(){    
  7.      
  8.           var data = [1000,1300,2000,3000,2000,2000,1000,1500,2000,5000,1000,1000];    
  9.           var xinforma = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];    
  10.      
  11.           // 获取上下文    
  12.           var a_canvas = document.getElementById('a_canvas');    
  13.           var context = a_canvas.getContext("2d");    
  14.      
  15.      
  16.           // 绘制背景    
  17.           var gradient = context.createLinearGradient(0,0,0,300);    
  18.      
  19.      
  20.          // gradient.addColorStop(0,"#e0e0e0");    
  21.           //gradient.addColorStop(1,"#ffffff");    
  22.      
  23.      
  24.           context.fillStyle = gradient;    
  25.      
  26.           context.fillRect(0,0,a_canvas.width,a_canvas.height);    
  27.      
  28.           var realheight = a_canvas.height-15;    
  29.           var realwidth = a_canvas.width-40;    
  30.           // 描绘边框    
  31.           var grid_cols = data.length + 1;    
  32.           var grid_rows = 4;    
  33.           var cell_height = realheight / grid_rows;    
  34.           var cell_width = realwidth / grid_cols;    
  35.           context.lineWidth = 1;    
  36.           context.strokeStyle = "#a0a0a0";    
  37.      
  38.           // 结束边框描绘    
  39.           context.beginPath();    
  40.           // 准备画横线    
  41.           /*for(var row = 1; row <= grid_rows; row++){    
  42.             var y = row * cell_height;    
  43.             context.moveTo(0,y);    
  44.             context.lineTo(a_canvas.width, y);    
  45.           }*/    
  46.               
  47.             //划横线    
  48.             context.moveTo(0,realheight);    
  49.             context.lineTo(realwidth,realheight);    
  50.                     
  51.                  
  52.             //画竖线    
  53.           context.moveTo(0,20);    
  54.            context.lineTo(0,realheight);    
  55.           context.lineWidth = 1;    
  56.           context.strokeStyle = "black";    
  57.           context.stroke();    
  58.                   
  59.      
  60.           var max_v =0;    
  61.               
  62.           for(var i = 0; i<data.length; i++){    
  63.             if (data[i] > max_v) { max_v =data[i]};    
  64.           }    
  65.           max_vmax_v = max_v * 1.1;    
  66.           // 将数据换算为坐标    
  67.           var points = [];    
  68.           for( var i=0; i < data.length; i++){    
  69.             var vdata[i];    
  70.             var px = cell_width * (i +1);    
  71.             var py = realheight - realheight*(v / max_v);    
  72.             //alert(py);    
  73.             points.push({"x":px,"y":py});    
  74.           }    
  75.      
  76.           //绘制坐标图形    
  77.           for(var i in points){    
  78.             var p = points[i];    
  79.             context.beginPath();    
  80.             context.fillStyle="green";    
  81.             context.fillRect(p.x,p.y,15,realheight-p.y);    
  82.                  
  83.             context.fill();    
  84.           }    
  85.           //添加文字    
  86.           for(var i in points)    
  87.           {  var p = points[i];    
  88.             context.beginPath();    
  89.             context.fillStyle="black";    
  90.             context.fillText(data[i], p.x + 1, p.y - 15);    
  91.              context.fillText(xinforma[i],p.x + 1,realheight+12);    
  92.              context.fillText('月份',realwidth,realheight+12);    
  93.              context.fillText('资金量',0,10);    
  94.               }    
  95.         },false);    
  96.       })();    
  97.            
  98. </script>    
  99. </html>  

html5生成柱状图(条形图)详细代码

运行结果:

html5生成柱状图(条形图)效果的实例代码

以上这篇html5生成柱状图(条形图)效果的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

原文地址:http://www.cnblogs.com/shuniuniu/p/5318666.html

HTML / CSS 相关文章推荐
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
HTML5注册页面示例代码
Mar 27 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 #HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 #HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 #HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 #HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 #HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 #HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 #HTML / CSS
You might like
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
Python操作列表之List.insert()方法的使用
2015/05/20 Python
详解Python验证码识别
2016/01/25 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
档案管理员岗位职责
2013/12/01 职场文书
管理部部长岗位职责
2013/12/05 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技