公司项目要用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. poj 2264(LCS)

    Advanced Fruits Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2158   Accepted: 1066   ...

  2. 学习OpenResty编程

    1.Windows版本的下载位置 https://github.com/LomoX-Offical/nginx-openresty-windows Linux下OpenResty的下载和安装 http ...

  3. （五）agentd端cpu的触发器配置

    配置===>模板===>选择对应的模板===> 这里我验证触发器是否有效,定义的触发器的值超过0.01就出发报警,这里我做的是最新的T值超过0.01就触发触发器 验证,说明触发器触发 ...

  4. codeforces Round #440 C Maximum splitting【数学/素数与合数/思维/贪心】

    C. Maximum splitting time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  5. POJ 1240 Pre-Post-erous! && East Central North America 2002 (由前序后序遍历序列推出M叉树的种类)

    题目链接:http://poj.org/problem?id=1240 本文链接:http://www.cnblogs.com/Ash-ly/p/5482520.html 题意: 通过一棵二叉树的中序 ...

  6. 使用 Hibernate 完成 HibernateUtils 类 (适用于单独使用Hibernate或Struts+Hibernate)

    package com.istc.Utilities; import org.hibernate.Session; import org.hibernate.SessionFactory; impor ...

  7. 12、Flask实战第12天：子域名

    什么是子域名,我们的后台管理系统, 比如cms.heboan.com.配置子域名需要用到蓝图技术: 我现在buleprints下面创建一个cms.py 蓝图 from flask import Blu ...

  8. SD 一轮集训 day1 lose

    神TM有是结论题,我讨厌结论题mmp. 杨氏矩阵了解一下(建议去维基百科). 反正就是推柿子,使劲推,最后写起来有一点小麻烦,但是在草稿纸(然鹅我木有啊)上思路清晰的话还是没问题的. #include ...

  9. 【费马小定理+快速幂+逆元】BZOJ3240-[NOI2013]矩阵游戏

    [题目大意] 若用F[i][j]来表示矩阵中第i行第j列的元素,则F[i][j]满足下面的递推式:F[1][1]=1F[i,j]=a*F[i][j-1]+b (j!=1)①F[i,1]=c*F[i-1 ...

  10. python的turtle模块画折线图

    代码如下: import turtle yValues = [10.0,7.4,6.4,5.3,4.4,3.7,2.6] def main(): t = turtle.Turtle() t.hidet ...