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 3D制作实战案例分析
Sep 18 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 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
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
python中函数默认值使用注意点详解
2016/06/01 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
python爬取网易云音乐评论
2018/11/16 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
Linux Interview Questions For software testers
2012/06/02 面试题
八年级历史教学反思
2014/01/10 职场文书
征婚广告词
2014/03/17 职场文书
优秀教师演讲稿
2014/05/06 职场文书
经典禁毒标语
2014/06/16 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
微信小程序用户授权最佳实践指南
2021/05/08 Javascript