php柱状图html代码,html5生成柱状图(条形图)效果的实例代码
下面小编就为大家分享一篇html5生成柱状图(条形图)效果的实例代码。小编觉得挺不错的,现在分享给大家,也给大家一个参考。一起跟随小编过来看看吧
XML/HTML Code复制内容到剪贴板
(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
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);
})();
html5生成柱状图(条形图)详细代码
运行结果:
相关推荐:
php柱状图html代码,html5生成柱状图(条形图)效果的实例代码相关推荐
- html实现的动画效果代码,CSS实现雨滴动画效果的实例代码
玻璃窗 今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...
- 如何在html中自动生成条形图,html5生成柱状图(条形图)效果的实例代码
XML/HTML Code复制内容到剪贴板 (function (){ window.addEventListener("load", function(){ var data = ...
- html左右循环滚动代码,不间断循环滚动效果的实例代码(必看篇)
滚动测试 /** * @para obj 目标对象 如:demo,deml1,demo2 中的"demo" 可任意,只要不重复 * * @para speed 滚动速度 越大越慢 ...
- html5柱状图模板,html5生成柱状图(条形图)
(function (){ window.addEventListener("load", function(){ var data = [1000,1300,2000,3000, ...
- 使用Vue动态生成form表单的实例代码
具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流: ...
- oracle存储过程生成单号,Oracle生成单据编号存储过程的实例代码
Oracle生成单据编号存储过程,在做订单类似的系统都可能会存在订单编号不重复,或是流水号按日,按年,按月进行重新编号. 可以参考以下存储过程 CREATE OR REPLACE procedure ...
- h5大转盘 php,HTML5 canvas实现中奖转盘的实例代码
本篇文章给大家带来的内容是关于HTML5 canvas实现中奖转盘的实例代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 最近在学canvas做动画,于是就写个转盘练下手. 上个简 ...
- oracle存储过程插入自动编号,Oracle生成单据编号存储过程的实例代码
Oracle生成单据编号存储过程,在做订单类似的系统都可能会存在订单编号不重复,或是流水号按日,按年,按月进行重新编号. 可以参考以下存储过程 0 then if DIsAutoCreate=1 TH ...
- android 仿ios动画效果代码,Android仿IOS上拉下拉弹性效果的实例代码
用过iphone的朋友相信都体验过页面上拉下拉有一个弹性的效果,使用起来用户体验很好:Android并没有给我们封装这样一个效果,我们来看下在Android里如何实现这个效果.先看效果,感觉有些时候还 ...
最新文章
- 比特币的价格今年会达到10万美元吗?有人用蒙特卡罗方法预测了一下
- [转载]HTTP PUSH技术原理,结合ASP.NET实现以及评述
- SELECT 与 SET 对变量赋值的区别(存储过程)
- RDLC 示例 文章 1
- ffmpeg 为取经而来_伊力特的英雄情结从何而来?
- 程序员们,节日快乐!
- Java建造者模式详解
- wifi芯片_全新蜕变!康希通信第四代WIFI 6 FEM芯片将于2020年Q1量产
- python格式化代码快捷键_推荐一个小而美的Python代码格式化工具
- 太阳跟踪装置系统设计与制作
- 计算机网络电子邮件的基本格式,怎样的格式才是正确的电子邮件格式?
- 微信公众平台之模拟登录
- 苹果证书导出p12文件
- win下激活python虚拟环境及激活失败解决方案
- 深度学习LSTM框架图PPT高清
- 电脑能连接热点和网线,不能连接WIFI
- Zadig 构建效率提升 40% 背后的实践思路
- java数字转换中文
- 在线安装计算机应用软件,计算机应用与网络基础教程 常用软件安装new.ppt
- java学习之实验二
热门文章
- SAP UI5 aggregation field type
- SAP物料主数据创建时间的线性增长
- 一个SAP开发人员的养蚕流水帐
- Request download hierarchy check
- workaround for error message Table maintenance not allowed for table XXX
- 一个nodejs里日志文件的实现
- OpenFOAM安装教程(史上最全:OpenFOAM、ParaView、OpenFOAM多版本共存)
- 校友管理软件 JAVA_开源项目1:某大学校友管理系统
- php地图,地图php接口
- 剑指offer03-数组中重复的数字(java)|leetcode刷题