<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_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生成柱状图（条形图）的更多相关文章

  1. 如何用asp.net MVC框架、highChart库从sql server数据库获取数据动态生成柱状图

    如何用asp.net MVC框架.highChart库从sql server数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?

  2. 使用jfreechart生成柱状图、折线图、和饼状图

    JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets, servlets 以及JSP等使用所设计.下面我就详细介绍如 ...

  3. highCharts+Struts2生成柱状图

    这篇文章主要结合Struts2+json+Highcharts实现动态数据的显示.为了节省时间,就不写数据库了.在action中用一个集合来模拟从数据库取到的数据.模拟数据为三个学生在不同时间成绩的变 ...

  4. 如何使用Jfreechart生成柱状图？

    JFreeChart是JAVA平台上的一个开放的图表绘制类库. 首先 (http://www.jfree.org /jfreechart) 总这个网址下载所需要的库,然后解压,放在某个地方. 我们默认 ...

  5. 使用HTML5画柱状图

    柱状图在很多应用中都比较常见,例如投票结果的统计分析,企业销售数据的统计分析等等.    需求分析:  一个柱状图一般包含以下几部分:  1.标题  2.横坐标(含标题)  3.竖坐标 (含标题.刻度 ...

  6. Java读取数据库数据生成柱状图

    此案例是用swing显示数据的.须要引入jfreechart相关包.不同版本号可能包不同样.本人用的是 此案例在ssi框架下会报错,不用框架就没问题. Java后台逻辑代码: public class ...

  7. Thinkphp+ECharts生成柱状图

    1.首先进ECharts官网下载echarts.js 点击下载,结合TP5讲解,主要代码在js里面,更多请到ECharts官网 2.引进echarts.js <!DOCTYPE html> ...

  8. 页面生成柱状图 --- D3.js

    转载自:https://www.cnblogs.com/fastmover/p/7779660.html D3.js从入门到"放弃"指南 前言 近期略有点诸事不顺,趁略有闲余之时, ...

  9. devexpress中用ChartControl生成柱状图

    在界面中拖入一个ChartControl控件,然后添加一个simplebutton控件.在simplebutton控件的click事件中加入如下代码: private void button1_Cli ...

随机推荐

  1. StartUML破解

    破解文件路径如今下: .../StarUML/www/license/node/LicenseManagerDomain.js 使用文本编辑器打开,红色字体为添加内容: function valida ...

  2. 【三支火把】---C文件学习

    ---恢复内容开始--- 又看了一遍文件的知识点了,断断续续已经看了2-3遍,也就这次花了点时间做了一下总结,以后我想都不会再去翻书了,哈哈. 1. 基于缓冲区的文件操作2. 打开关闭文件3. 单个字 ...

  3. C#如何转换2位数字表示的年

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:C#如何转换2位数字表示的年.

  4. 用gooreplacer来加速你的浏览器

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用gooreplacer来加速你的浏览器.

  5. iOS Xcode8的适配

    1.打开应用后打印了很多的log信息 解决方法: Xcode8里边 Edit Scheme... -> Run -> Arguments, 在Environment Variables里边 ...

  6. android 开源项目学习<二>

    roottools:   RootTools gives Rooted developers easy access to common rooted tools...  https://code.g ...

  7. hud 1241 Oil Deposits

    Oil Deposits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tot ...

  8. careercup-递归和动态规划 9.4

    9.4 编写一个方法,返回某集合的所有子集. 类似leetcode:Subsets 解法: 解决这个问题之前,我们先要对时间和空间复杂度有个合理的评估.一个集合会有多少子集?我们可以这么计算,生成了一 ...

  9. vim中的一些高级命令的使用

    现在一般在windows下面对txt文档操作的时候,我一般使用gvim软件来操作,虽然没有unix/linu下面的正宗,并且很多命令没有,但是还是有很多方便之处的 下面是重温vim命令时,我我自己以前 ...

  10. 截获导航控制器系统返回按钮的点击pop及右滑pop事件

    前几天看了@栾小布的一篇文章:Custom backBarButtonItem,在跟着做的时候我又顺便扩展了一些,写此文章的目的是为了总结一下自己所写的东西,方便以后翻看容易,同时也是自己入行iOS一 ...