<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. Sublime Text3使用及常用插件

    1.安装packages组件: 参考一: https://sublime.wbond.net/installation 参考二: http://blog.csdn.net/superskk6/arti ...

  2. input输入框默认文字，点击消失

    <input type="text" value="请输入用户名" onfocus="if(value=='请输入用户名') {value='' ...

  3. 如何用jQuery实现在鼠标滚动后导航栏保持固定

    要实现如下效果,鼠标滚动后,上方导航栏置顶固定 关键html代码: <div class="header-bottom"> <div class="co ...

  4. 以管理员身份启动ClickOnce部署的应用程序

    ClickOnce方式部署应用简单方便,估计很多人都用过,但这种方式存在一定的“缺陷”,即以管理员方式启动应用的问题,虽然出于安全考虑可以理解,但给需要管理员权限才能正常运行的程序带来了一定的麻烦,这 ...

  5. cocos2d-x 绘制基本图元

    转自:http://4137613.blog.51cto.com/4127613/754729 第一部分:基本图形绘制   cocos2dx封装了大量opengl函数,用于快速绘制基本图形,这些代码的 ...

  6. dubbo资料

    http://blog.csdn.net/morning99/article/details/40426781http://blog.csdn.net/ruishenh/article/details ...

  7. 【Servlet】Servlet应用的get、post访问及和JSP的配合使用

    Servlet是一种服务器端的Java应用程序,具有独立于平台和协议的特性,可以生成动态的Web页面. 它担当客户请求(Web浏览器或其他HTTP客户程序)与服务器响应(HTTP服务器上的数据库或应用 ...

  8. 虚拟机windows xp 下安装配置mysql cluster 7.3.2

    1.虚拟机环境下安装的 1 192.168.131.21(管理节点,存储节点,sql节点) 2 192.168.131.22(存储节点,sql节点)   2.安装程序 在两台机器上面同时进行 第一步: ...

  9. create database xx 或者show database 没有任何反应

    命令是以:结束的,你忘记了,记住,是英文状态下的:

  10. Scala应用函数

    我们使用“_” 来代替单个的参数,实际上你也可以使用“_”来代替整个参数列表,比如说,你可以使用 print _ 来代替 println (_). someNumbers.foreach(printl ...