公司项目要用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. Liquibase 快速开始

    Step 1 :创建Changelog文件,所有的数据库变动都会保存在Changelog文件中 <?xml version="1.0" encoding="UTF- ...

  2. PHP实现支付宝即时到账功能

    本文实例为大家分享了PHP支付宝即时到账功能的实现代码,供大家参考,具体内容如下 首先需要下载即时到账交易接口,传送门https://doc.open.alipay.com/doc2/detail?t ...

  3. [LOJ6433]最大前缀和

    深刻感受到自己的水平和机房里的其他人相差甚远,他们都是随手秒这个题的... $n$很小,考虑状压DP 当一个序列在某个位置取到最大前缀和后,意味着如果把后面的数抽出来单独成序列,那么它的每个前缀和都$ ...

  4. 【最近公共祖先】【树链剖分】CODEVS 1036 商务旅行

    树链剖分求lca模板.O(log(n)),就是不倍增嘛~ #include<cstdio> #include<algorithm> using namespace std; # ...

  5. Problem G: 零起点学算法27——等级分制度

    #include<stdio.h> int main() { int a,b; while(scanf("%d %d",&a,&b)!=EOF) +a* ...

  6. Java高级架构师（一）第24节：加入ehcache，把工程加入到Git

    ehcache的maven配置: <!-- ehcache的jar --> <dependency> <groupId>net.sf.ehcache</gro ...

  7. iOS 自定义相机带拍摄区域边框及半透明遮罩层(含源码)

    开始时准备封装成ViewController的相机,但是在不改我相机控件源码的情况下,使用者很难自定义UI.于是想到将相机核心功能封装到View里,暴露出功能方法给外面调用,调用者只需将LFCamer ...

  8. Android Studio 中修改versionCode跟versionName

    在Android Studio 中修改versionCode 跟versionName最写了一个新版的软件准备发布到应用平台上,但是versionCode和versionName的值一直修改不成功,在 ...

  9. HDU 1402 A * B Problem Plus (FFT求高精度乘法)

    A * B Problem Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  10. HOW TO CHECK FOR ACTIVE TRACE FLAGS ON MICROSOFT SQL SERVER

    http://crashmag.net/how-to-check-for-active-trace-flags-on-microsoft-sql-server You check for active ...