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来绘制一个月食图案
Jul 18 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 HTML / CSS
使用CSS实现音波加载效果
May 07 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中for与foreach的区别分析
2011/03/09 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
JavaScript 题型问答有答案参考
2010/02/17 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
基于js文件加载优化(详解)
2018/01/03 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
安装dbus-python的简要教程
2015/05/05 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
python mysql中in参数化说明
2020/06/05 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
CAD制图设计师自荐信
2014/01/29 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
2014年冬季防火方案
2014/05/21 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
武当山导游词
2015/02/03 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript