<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. dublin core实例

    <?xml version="1.0"?> <metadata xmlns="http://example.org/myapp/" xmlns ...

  2. Hyper-V网络虚拟化--VM之间拷贝速度慢

    Hyper-V网络虚拟化后,两台VM使用的是同一个VM网卡,相同IP地址池,但是互相拷贝文件速度很慢,只有2M左右,拷贝同时ping延迟在2000ms,解决方法: 主机型号:HP ProLiant D ...

  3. mysql数据库表中判断字段是否存在，如果不存在则创建该字段

    $key_answer = 'answer'.$question_num; $test_question = mysql_query('DESCRIBE question_manage {$key_q ...

  4. 【系列】Matei Zaharia(Spark系统作者)博士论文-0 摘要

    随着处理器提升速度下降和数据量的不断增长,非常多公司和组织(既有互联网公司也有传统的企业另一些研究机构)都要求他们的应用可以Scale out到更大的分布式系统上(比方整个数据中心). 这些应用又分为 ...

  5. java程序查不出数据来

    同样的错误,不可再犯第三次!!! 数据库中是char,里面带空格,但在pl/sql中这样写可以查出来.如下: select ipostid from product t where ipostid= ...

  6. 动作-CCActionInterval之CCGridAction家族

    CCGrid3DAction // 作用:x轴3D反转特效 CCActionInterval *flipX3D= CCFlipX3D::create(4); //    作用:Y轴3D反转特效 CCA ...

  7. eclipse 注释模板设置

    方法注释模板 /** * @title ${enclosing_method} * @description ${todo} * ${tags} ${return_type} * @Date ${da ...

  8. HttpClient4.4 进行Http连接通讯

    以前一直使用jdk自带的urlConnection来进行http通讯,HttpClient与之相比,HttpClient更具有灵活度和易用性.HttpClient能够方便使用连接池,使用时需要重新创建 ...

  9. Clean Code(二)：函数

    笔记2:函数1.短小.还要更短小    每个函数都一目了然,每个函数灰依序把你带到下一个函数    if.else.while语句等,其中的代码块应该只有一行,块内调用的函数名称应该较具有说明性2.只 ...

  10. Java 并发——多线程基础

    Thead类与Runnable接口 Java的线程,即一个Thread实例. Java的线程执行过程有两种实现方式: 子类继承Thread类,并且重写void run()方法. 自定义类实现Runna ...