帝王谷资源网 Design By www.wdxyy.com
XML/HTML Code复制内容到剪贴板
- <html>
- <canvas id="a_canvas" width="1000" height="700"></canvas>
- <script>
- (function (){
- window.addEventListener("load", function(){
- var data = [1000,1300,2000,3000,2000,2000,1000,1500,2000,5000,1000,1000];
- var xinforma = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
- // 获取上下文
- var a_canvas = document.getElementById('a_canvas');
- var context = a_canvas.getContext("2d");
- // 绘制背景
- var gradient = context.createLinearGradient(0,0,0,300);
- // gradient.addColorStop(0,"#e0e0e0");
- //gradient.addColorStop(1,"#ffffff");
- context.fillStyle = gradient;
- context.fillRect(0,0,a_canvas.width,a_canvas.height);
- var realheight = a_canvas.height-15;
- var realwidth = a_canvas.width-40;
- // 描绘边框
- var grid_cols = data.length + 1;
- var grid_rows = 4;
- var cell_height = realheight / grid_rows;
- var cell_width = realwidth / grid_cols;
- context.lineWidth = 1;
- context.strokeStyle = "#a0a0a0";
- // 结束边框描绘
- context.beginPath();
- // 准备画横线
- /*for(var row = 1; row <= grid_rows; row++){
- var y = row * cell_height;
- context.moveTo(0,y);
- context.lineTo(a_canvas.width, y);
- }*/
- //划横线
- context.moveTo(0,realheight);
- context.lineTo(realwidth,realheight);
- //画竖线
- context.moveTo(0,20);
- context.lineTo(0,realheight);
- context.lineWidth = 1;
- context.strokeStyle = "black";
- context.stroke();
- var max_v =0;
- for(var i = 0; i<data.length; i++){
- if (data[i] > max_v) { max_v =data[i]};
- }
- max_vmax_v = max_v * 1.1;
- // 将数据换算为坐标
- var points = [];
- for( var i=0; i < data.length; i++){
- var v= data[i];
- var px = cell_width * (i +1);
- var py = realheight - realheight*(v / max_v);
- //alert(py);
- points.push({"x":px,"y":py});
- }
- //绘制坐标图形
- for(var i in points){
- var p = points[i];
- context.beginPath();
- context.fillStyle="green";
- context.fillRect(p.x,p.y,15,realheight-p.y);
- context.fill();
- }
- //添加文字
- for(var i in points)
- { var p = points[i];
- context.beginPath();
- context.fillStyle="black";
- context.fillText(data[i], p.x + 1, p.y - 15);
- context.fillText(xinforma[i],p.x + 1,realheight+12);
- context.fillText('月份',realwidth,realheight+12);
- context.fillText('资金量',0,10);
- }
- },false);
- })();
- </script>
- </html>
html5生成柱状图(条形图)详细代码
运行结果:
以上这篇html5生成柱状图(条形图)效果的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
原文地址:http://www.cnblogs.com/shuniuniu/p/5318666.html
标签:
html5,柱状图,条形图
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年07月01日
2024年07月01日
- 《101系列:香港影視傳奇6CD 101首家喻户晓的影视金曲》[WAV+CUE][2.9GB]
- 蔡依林《蔡依林歌曲合集》[320k/MP3][431.6MB]
- 陈宁《破晓 HQⅡ》2024头版限量编号 [WAV+CUE][500MB]
- 瑞鸣音乐《中国音乐地图之听见河南豫剧经典唱段》2020[WAV分轨]
- 【伊比萨沙发】VA-2024-IbizaSpring2024(LoungeCocktailsfromtheHeart)[FLAC]
- 群星《世界顶级汽车音响试音王》4K金碟16CD[WAV+CUE]
- 群星-音效环绕天碟《极致环绕人声天碟天品》7CD[WAV]
- 泰拉克SACD古典试音碟7SACD-ISO
- 群星《红歌宝典》20CD[WAV/分轨]
- 《101系列:好歌101首 细听年代精选》[WAV+CUE][3.6GB]
- 《101系列 6CD 国语经典101首歌曲 张学友 王菲代表作》[APE+CUE][2.8GB]
- 《101系列:国语经典101 VOL2 6CD 精选最经典101首》[WAV+CUE][2.3GB]
- 群星《十年网络红歌》15CD[WAV分轨]
- 宝丽金-环球10周年至50周年经典金曲15CD[低速原抓WAV+CUE]
- FIM唱片《十大男伶》[低速原抓WAV+CUE]