公司项目要用js画柱状图，本来想用个插件吧 chart.js 忽然一想 我们也用不了那么大的插件。自己写个吧，也能看看自己那点数学水平能够不！

有几个小亮点吧

1.函数x 和 函数y 对坐标进行了转化 假设以画布的左上角为原点 那算起来真是太坑爹了

2.画矩形用画粗线 ，哎呀 那个画矩形那四个点真是要命啊 ，还是画线实在！

抛砖引玉一下。大神勿喷！

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>报告结果</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

<style>

body{text-align:center;}

#canvas{width:300px;margin:0 auto;}

</style>

<canvas id="canvas" width="300" height="300"></canvas>

<script type="text/javascript">

	var canvas = document.getElementById('canvas');

	var cx = canvas.getContext('2d');

	/*

	var x_width = 300;

	var y_width = 300;

	var x_left = 50;

	var x_right = 230;

	var y_up_top = 50;

	var y_up_bottom = 150;

	var y_down = 80;

	*/

	draw();

	function draw() {

		//轴

		drawLine(-50,0,250,0,0.5,'#999999');

		drawLine(0,200,0,-80,0.5,'#999999');

		//刻度

		for(var i=2;i<=10;i=i+2){

			cx.fillText(i,x(-15),y(g(i))+10);

			drawLine(-50,g(i),250,g(i),0.5,'#f0f0f0');

		}

		//第一个线

		var color = ['#ffbfab','#fee17b','#effe87','#c2f3a1','#effe87'];

		var grades = [7,8,6,10,8];

		for(var i=20,j=0;j<5;j++,i=i+8){

			drawLine(i,0,i,g(grades[j]),8,color[j]);

		}

		var grades = [6,7,6,9,8];

		for(var i=80,j=0;j<5;j++,i=i+8){

			drawLine(i,0,i,g(grades[j]),8,color[j]);

		}

		var grades = [5,7,5,1,8];

		for(var i=140,j=0;j<5;j++,i=i+8){

			drawLine(i,0,i,g(grades[j]),8,color[j]);

		}

		var grades = [5,7,5,7,8];

		for(var i=200,j=0;j<5;j++,i=i+8){

			drawLine(i,0,i,g(grades[j]),8,color[j]);

		}

	}

	function x(x){

		return x+50;

	}

	function y(y){

		return 200-y;

	}

	function g(grade){

		return 15*grade;

	}

	//画线

	function drawLine(b_x,b_y,e_x,e_y,width,color){

		cx.strokeStyle = color;

		cx.lineWidth = width;

		cx.beginPath();

		cx.moveTo(x(b_x),y(b_y));

		cx.lineTo(x(e_x),y(e_y));

		cx.closePath();

		cx.stroke();

	}

</script>

</body>

</html>

js canvas画柱状图 没什么高端的 就是一篇偶尔思路的的更多相关文章

  1. js+canvas画随机4位验证码

    啥都不说了,复制代码吧!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. 【干货】教你如何利用fullPage.js以及move.js插件打造高端大气的网站效果！

    前言: 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次. 在学习过jQuery插件之后,才发现之前的很多网站特效完全可 ...

  3. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  4. 如何从零绘制k线图 -- 原生js canvas图表绘制

    样式如下图 源码地址: https://github.com/sutianbinde/charts 编写这个需要具备canvas基础,如果没有canvas基础可以学习我前面的cnavas基础博客. 具 ...

  5. js canvas游戏初级demo-躲避障碍物

    在线演示地址 http://200ok.fun:3100/html/game_demo.html 继上次js canvas游戏初级demo-上下左右移动(https://www.cnblogs.com ...

  6. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  7. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  8. 利用js+canvas实现的时钟效果图

    canvas+js时钟特效 运用js+canvas方面的知识完成一个时钟的效果图,再利用for循环实现指针的转动效果: <!--网页文档的声明--> <!doctype html&g ...

  9. 原生JS+Canvas实现五子棋游戏

    一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代 ...

随机推荐

  1. IE添加可信任站点,启用ActiveX插件批处理

    添加可信任站点IP地址为:192.168.1.108,启用ActiveX插件执行以下批处理命令: reg add "HKCU\Software\Microsoft\Windows\Curre ...

  2. Java基础：GC机制

    上一节,简单的介绍了java当中的内存模型,那么经常和内存模型一起提到的JAVA垃圾回收机制当然也需要在这里一并的总结一下. 所谓是垃圾回收机制,用通俗的话来说,就是将那些没有被任何变量引用的实例对象 ...

  3. [thinkphp] 获取根目录绝对路径

    $root = realpath(__ROOT__);

  4. [orangehrm] 安装问题集合

    Web server allows .htaccess files # 这一项检查不通过 解决: In conf/extra/httpd-vhosts.conf, add the line Allow ...

  5. HDU 6324.Problem F. Grab The Tree-博弈(思维) (2018 Multi-University Training Contest 3 1006)

    6324.Problem F. Grab The Tree 题目看着好难,但是题解说的很简单,写出来也很简单.能想出来就是简单的,想不出来就难(讲道理,就算是1+1的题目,看不出来就是难的啊). 和后 ...

  6. ASP.NET Core 2.2 基础知识(十五) Swagger

    安装 Nuget 包 注册 Swagger public void ConfigureServices(IServiceCollection services) { services.AddMvc() ...

  7. c++基础学习之string

    //学习使用string类 2013-10-18 lingc #include <iostream> #include <string>//include this head ...

  8. 【哈希表】CODEVS1230 元素查找

    #include<cstdio> #include<vector> using namespace std; typedef vector<int>::iterat ...

  9. 关于Hadoop_env.sh中的HADOOP_CLASSPATH

    之前博客里介绍了如何自定义DoubleArrayWritable,并将该类型的value写入SequenceFile文件中,为了能够使用命令查看这个文件中的内容(果然坑都是一步一步给自己挖的)参考了网 ...

  10. int和Integer，String和String（包装类）

    1.int和Integer的值如果是一样的,则是在内存中开辟相同的内存空间 2.但是String和String(包装类)是不一样的 代码演示: int a=1; Integer b = new Int ...