公司项目要用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. AC日记——曼哈顿交易 洛谷 P3730

    曼哈顿交易 思路: 都是套路: 代码: #include <cmath> #include <cstdio> #include <cstring> #include ...

  2. [jquery] ajax 调试

    $.ajax({ type: ‘post’, url: url, data: {code: ‘15′}, dataType: ‘jsonp’, sccuess:function(data){ aler ...

  3. 一句话木马与caidao

    实验吧有个试验环境:http://www.shiyanbar.com/experiment-course/experiment-course/vid/1812 菜刀的主要功能是用来连接一句话木马的,a ...

  4. P1059 明明的随机数【去重排序】

    题目描述 明明想在学校中请一些同学一起做一项问卷调查,为了实验的客观性,他先用计算机生成了N个1到1000之间的随机整数(N≤100),对于其中重复的数字,只保留一个,把其余相同的数去掉,不同的数对应 ...

  5. HDU1385 Minimum Transport Cost （Floyd）

    Minimum Transport Cost Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/O ...

  6. boost::Circular Buffer

    boost.circular_buffer简介 很多时候,我们需要在内存中记录最近一段时间的数据,如操作记录等.由于这部分数据记录在内存中,因此并不能无限递增,一般有容量限制,超过后就将最开始的数据移 ...

  7. java应用高cpu占用

    一个应用占用CPU很高,除了确实是计算密集型应用之外,通常原因都是出现了死循环 排查故障如下: 1.根据top命令,发现PID为28555的Java进程占用CPU高达200%,出现故障 2.通过ps ...

  8. Gitlab运维

    安装Gitlab 新建 /etc/yum.repos.d/gitlab-ce.repo [gitlab-ce] name=gitlab-ce baseurl=http://mirrors.tuna.t ...

  9. 109.关路灯（区间dp）

    1258 关路灯  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master 题解 查看运行结果 题目描述 Description 多瑞卡得到了一份有趣而高薪的工作.每 ...

  10. 狗日的Javascript中的闭包

    前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.下面是作者从作用域链慢慢讲到 ...