公司项目要用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. MATLAB中的积分运算

    MATLAB中计算一元函数的(不)定积分使用int函数. ①int(s)计算符号表达式s的不定积分 syms x;s = x^2;int(s) 计算x^2的不定积分. ②int(s,x)计算符号表达式 ...

  2. [libgdx游戏开发教程]使用Libgdx进行游戏开发(2)-游戏框架搭建

    让我们抛开理论开始code吧. 入口类CanyonBunnyMain的代码: package com.packtpub.libgdx.canyonbunny; import com.badlogic. ...

  3. Bot Framework测试

    在开发完成Bot Framework后,在本机的模拟器都是成功的,但未知在发布后会出现什么样的问题,所以需要将本机发布的站点给到Bot 1.在Bot Framework注册一个Bot,打开Bot Fr ...

  4. bufferknife框架的正确使用方式 -终于他么知道了

    1.由于ButterKnife从7.x到8.x后,运行时和编译器被分开来,你还需要配置 apt ‘com.jakewharton:butterknife-compiler:8.1.0’,在projec ...

  5. STL优先队列——踩坑日记

    priority_queue 可以定义STL中的优先队列,但是优先队列在应用于自己定义的类型时需要重载<运算符,或者通过仿函数来定义比较方法,在定义比较方法的过程中,比较大的坑是STL中对于参数 ...

  6. 大数据技术之_16_Scala学习_06_面向对象编程-高级+隐式转换和隐式值

    第八章 面向对象编程-高级8.1 静态属性和静态方法8.1.1 静态属性-提出问题8.1.2 基本介绍8.1.3 伴生对象的快速入门8.1.4 伴生对象的小结8.1.5 最佳实践-使用伴生对象解决小孩 ...

  7. Codeforces Round 251 (Div. 2)

    layout: post title: Codeforces Round 251 (Div. 2) author: "luowentaoaa" catalog: true tags ...

  8. [Codeforces 8E] Beads

    Brief Intro: 将所有n位二进制串中满足字典序不大于其逆序串,取反串,逆序取反串中按字典序排序的第m个输出 n<=50 Algorithm: 首次接触数位DP的题目 根据数据范围,我们 ...

  9. 数据结构之B-树，你每天都在用的，源码发布！

    五一前就筹划着写下这篇文章,但是迫于自己从来没有实现过B-树(如果大家感兴趣,我可以考虑写一篇B+树的文章),手中没有源代码,另外自己以前对B-树也是一知半解状态中,担心误人子弟,在4月30日终于把代 ...

  10. 51单片机软件I2C驱动中的CY

    做一个MSP430的项目,虽然430内部有硬件I2C的模块,略难,准备直接移植51的..碰到一句代码 dat <<= 1; //移出数据的最高位 pSDA = CY; //送数据口 dig ...