用canvas来绘制柱状图，简单明了，绝对实用！

Love The Way You Lie 2021-07-24 20:12 663阅读 0赞

### 首先借助图片画一个简单的柱状图 ###

var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    		draw()
    		 
    		function draw(){
    			var image = new Image();//创建Image对象
    			image.src='images/1.png';//指定路径
    			image.onload=function(){//图片加载完成后执行的函数
    			  ctx.drawImage(image,0,0);//绘制图片
    		      ctx.beginPath();
    		      //这里开始画线条
    		      var dis=30;
    		      for(var i=0;i<4;i++){
    		      	ctx.beginPath();
    		      	var color = '#' + Math.random().toString(16).substr(2, 6).toUpperCase();//随机颜色
    		      	ctx.fillStyle=color;
    		      	
    		      	var height = Math.round(Math.random()*80+20);//在一定范围内随机高度
    		        ctx.fillRect(50+dis*i,115, 20, -height);//绘制一个柱状
    		      }
    		      //执行绘画
    		      ctx.stroke();
    			}
    		}

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

### 绘制一个比较完善的 ###

var canvas = document.getElementById('canvas');
    		canvas.width='600';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    		var x0=30,//x轴0处坐标
    			y0=280,//y轴0处坐标
    			x1=560,//x轴顶处坐标
    			y1=30,//y轴顶处坐标
    			dis=30;
    			
    		draw();
    			
    		function draw(){
    			  
    			  //先绘制X和Y轴
    			 ctx.beginPath();
    			 ctx.lineWidth=1; 
    			 
    		     ctx.moveTo(x0,y1);//笔移动到Y轴的顶部
    		     ctx.lineTo(x0,y0);//绘制Y轴
    		     ctx.lineTo(x1,y0);//绘制X轴
    		     ctx.stroke();
    		       
    		     //绘制虚线和Y轴值  
    		     var yDis = y0-y1;
    		     var n=1;
    		     ctx.fillText(0,x0-20,y0);//x,y轴原点显示0
    		     while(yDis>dis){
    		     	 ctx.beginPath();
    		     	 //每隔30划一个虚线
    		     	 ctx.setLineDash([2,2]);//实线和空白的比例
    		     	 ctx.moveTo(x1,y0-dis);
    		     	 ctx.lineTo(x0,y0-dis);
    		     	 ctx.fillText(dis,x0-20,y0-dis);
    		     	 //每隔30划一个虚线
    		     	 dis+=30;
    		     	 ctx.stroke();
    		     }
    		     
    		     var xDis=30,//设定柱子之前的间距
    		     	 width=40;//设定每个柱子的宽度
    		   	  //绘制柱状和在顶部显示值
    		      for(var i=0;i<8;i++){//假设有8个月
    		      	ctx.beginPath();
    		      	var color = '#' + Math.random().toString(16).substr(2, 6).toUpperCase();//随机颜色
    		      	ctx.fillStyle=color;
    		      	ctx.font = "13px scans-serif";//设置字体
    		      	
    		      	var height = Math.round(Math.random()*220+20);//在一定范围内随机高度
    		      	
    		      	var rectX=x0+(width+xDis)*i,//柱子的x位置
    		      		rectY=height;//柱子的y位置
    		      	
    		      	ctx.fillText((i+1)+'月份',rectX,y0+15);//绘制最下面的月份稳住
    		      	
    		        ctx.fillRect(rectX,y0, width, -height);//绘制一个柱状
    		        
    		        ctx.fillText(rectY,rectX+10,280-rectY-5);//显示柱子的值
    		      }
    		}

应该是比较完善了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1][]

### 代码中写了详细的注释就不多解释了 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/92dd281962de4c22958eaf2a8596433b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1]: /images/20210724/d1b18ea838b04e1eaa1022d4cff8f6fa.png

发表评论取消回复

表情：

评论列表（有 0 条评论，663人围观）

还没有评论，来说两句吧...

相关阅读

相关 Origin绘制柱状图

Origin科研绘图 1.调节柱状图之间的间距 2.设置柱状图的间隔以及显示的刻度范围，两种刻度范围图 3.origin

本是古典何须时尚/ 2023年06月14日 04:18/ 0 赞/ 401 阅读

相关 uni-app绘制柱状图

uni-app使用eachrts组件绘制柱状图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

淩亂°似流年/ 2023年03月06日 05:13/ 0 赞/ 45 阅读

相关用pd.plot绘制彩色柱状图

import pandas as pd import matplotlib.pyplot as plt import matplotlib.cm a

红太狼/ 2022年09月11日 14:26/ 0 赞/ 209 阅读

相关 matplotlib绘制柱状图(基础操作)

@TOC -------------------- 前言 Matplotlib 是 Python 的绘图库。它可与 NumPy 一起使用，提供了一种有效的 MatL

今天药忘吃喽~/ 2022年09月09日 12:56/ 0 赞/ 312 阅读

相关 Python——使用matplotlib绘制柱状图

Python——使用matplotlib绘制柱状图 1、基本柱状图首先要安装matplotlib（http://matplotlib.org/api/pyplot

落日映苍穹つ/ 2022年06月16日 08:59/ 0 赞/ 351 阅读

相关 canvas(柱状图)

html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

客官°小女子只卖身不卖艺/ 2022年06月03日 02:55/ 0 赞/ 284 阅读

相关 visdom 绘制条形图（柱状图）

可调用参数简介 `opts.title` : figure title `opts.width` : figure width `opts.height

以你之姓@/ 2022年03月17日 17:50/ 0 赞/ 457 阅读

相关 matplotlib：绘制简单折线图、柱状图与饼图

折线图：使用plt.plot(),其中第一个参数和第二个参数分别对应图标的X轴和Y轴，第三个字段表示折线图颜色，例如下方的’r’(red简称), lw代表线条的宽度

超、凢脫俗/ 2022年01月23日 10:43/ 0 赞/ 523 阅读

相关利用canvas绘制饼状图

代码中有注释，就不多说了很容易看明白 var canvas = document.getElementById('canvas'); canvas.w

朱雀/ 2021年07月24日 21:18/ 0 赞/ 729 阅读

相关用canvas来绘制柱状图，简单明了，绝对实用！

首先借助图片画一个简单的柱状图 var canvas = document.getElementById('canvas'); canvas.wi

Love The Way You Lie/ 2021年07月24日 20:12/ 0 赞/ 664 阅读