<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. nginx 重装添加http_ssl_module模块

    起因: 如果出现“[emerg] 10464#0: unknown directive "ssl" in /usr/local/nginx-0.6.32/conf/nginx.co ...

  2. 14周事情总结-机器人-大数据hadoop

    14周随着考试的进行,其他该准备的事情也在并行的处理着,考试内容这里不赘述了 首先说下,关于机器人大赛的事情,受益颇多,机器人的制作需要机械和电控两方面 昨天参与舵机的测试,遇到的问题:舵机不动 排查 ...

  3. 用sp_addlinkedserver建立链接服务器（sql server2008中通过测试）

    --在SQL SERVER 2008里,可以按以下的方式建立链接服务器 ? EXEC  sp_addlinkedserver          @server='Test',--这里是给链接服务器取的 ...

  4. [转] 引用 Java自带的线程池ThreadPoolExecutor详细介绍说明和实例应用

    PS: Spring ThreadPoolTaskExecutor vs Java Executorservice cachedthreadpool 引用 [轰隆隆] 的 Java自带的线程池Thre ...

  5. HDU1518(dfs)java/ c++

    Square Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  6. MAC地址查询 Linux/Unix操作系统mac地址怎么查

    Linux/Unix操作系统熟悉的人都通常是用console命令控制台来进行相应的操作.  Linux/Unix操作系统查看网卡mac地址的方法可以通过以下命令获得: 1.ifconfig -a 2. ...

  7. mac 终端中添加tree命令显示文件目录结构

      在Ubuntu下,通过 sudo apt-get install tree 可以使用tree命令,显示文件目录列表,如图所示: 在mac OS X系统下怎么使用呢? 在终端输入: cd $home ...

  8. the forth assignment of software testing

    软件测试用到的 pict33.msi. 加载安装即可. 顺步安装 使用背景: 假如现在有一个网站后台需要测试工程师进行测试用例设计.用常规的方法将参数列出: 帐户名: 空,不存在,超长,超短,正常 密 ...

  9. wamp配置虚拟主机

    ================================================================= 来源参考一:http://wenku.baidu.com/link? ...

  10. sea.js 学习

    开篇:终于学习了sea.js的使用了,因为它是一个模块加载工具,所以首先要了解javascript的模块编程,然后对sea.js的了解和使用 javascript 模块编程 为什么要模块化编程,为了让 ...