JavaScript+Canvas实现简单的柱状图
笔者之所以想要深入了解 Canvas，是因为最近几次的实习部门都属于 Data 这个门类下面，所以用echarts之类的图标库会很多很多，那么当然要好好学一下其间的底层原理了。
那么让我们好好聊聊，如何实现一个柱状图
如何实现一个柱状图
Step1
首先创建一个叫做barchart.html的新文件，并且在其中写入如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<canvas width="500" height="500" id="canvas"></canvas>
</body>
<script>
var data = [16, 68, 20, 30, 54];
</script>
</html>
Tips 我们知道canvas可以使用fillRect来实现一个矩形。
fillRect(x, y, xWidth, yHeight)
fillRect有四个参数，分别是x的坐标，y的坐标，宽度与高度。
Step2
我们创建文件包含了 canvas 和 script 元素，对canvas来说，我们标注了他的宽高，它类似于DOM中的DIV元素，我们可以为其添加样式和移动位置。
data变量呢则是一系列的数据集，我们将用这些变量来画柱状图。
接下来我们将获取canvas元素，并且绘制一个底层色（灰色）
//get a reference to the canvas
var canvas = document.getElementById('canvas');
//get a reference to the drawing context
var c = canvas.getContext('2d');
//draw c.fillStyle = "gray";
c.fillRect(0,0,500,500);
Step3
在我们的基本条件都具备了之后，我们可以添加数据了，这里采用一个循环来添加。
//draw data
c.fillStyle = "blue";
for(var i=0; i<data.length; i++) {
var dp = data[i];
c.fillRect(25 + i*100, 30, 50, dp*5);
}
效果如下：
但是这里有一个问题，我们的柱状图，反了！怎么让他正起来呢？
Step4
我们知道，fillRect的前两个参数是我们的起点x和y的坐标，那么为了实现“正”的效果，我们可以移动起点的位置。
//draw data
c.fillStyle = "blue";
for(var i=0; i<data.length; i++) {
var dp = data[i];
c.fillRect(25 + i*100, 500-dp*5 - 30 , 50, dp*5);
}
效果如下：
是不是看起来很舒服啦？
但是现在还有一个问题，我们的坐标轴去哪了？？？
Step5
现在，让我们一起来画一个坐标轴
首先需要画x轴和y轴
//draw axis lines c.fillStyle = "black"; c.lineWidth = 2.0; c.beginPath(); c.moveTo(30,10); c.lineTo(30,460); c.lineTo(490,460); c.stroke();
然后我们要新增y轴标记点和文本
//draw text and vertical lines
c.fillStyle = "black";
for(var i=0; i<6; i++) {
c.fillText((5-i)*20 + "",4, i*80+60);
c.beginPath();
c.moveTo(25,i*80+60);
c.lineTo(30,i*80+60);
c.stroke();
}
最后新增x轴文本
var labels = ["JAN","FEB","MAR","APR","MAY"];
//draw horiz text
for(var i=0; i<5; i++) {
c.fillText(labels[i], 50+ i*100, 475);
}
效果如下：
看起来有部分问题，让我们再来做一些调整！
Step6
将背景色改成白色 & 把起点做一下变更。
//draw background
c.fillStyle = "white";
c.fillRect(0,0,500,500);
//draw data
c.fillStyle = "blue";
for(var i=0; i<data.length; i++) {
var dp = data[i];
c.fillRect(40 + i*100, 460-dp*5 , 50, dp*5);
}
噔噔噔噔，我们的柱状图就这样写好啦~
到此这篇关于JavaScript+Canvas实现简单的柱状图的文章就介绍到这了,更多相关JavaScript Canvas柱状图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在javascript运动系列中，详细介绍了各种运动，其中就包括碰壁运动。但是，如果用canvas去实现，却是另一种思路。本文将详细介绍canvas动态小球重叠效果。下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了JS ES新特性 扩展运算符，下面文章围绕ES新特性 扩展运算符的相关资料展开详细内容,需要的朋友可以参考一下，希望对大家有所帮助2021-12-12
这篇文章主要为大家详细介绍了仅一个form表单，JavaScript可实现注册信息依次填写提交功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要介绍了js replace替换字符串同时替换多个方法 的相关资料,需要的朋友可以参考下2018-11-11
JavaScript的严格模式（Strict Mode）是一种在代码中启用的特殊模式，用于提供更严格的语法和错误检查，以改善代码质量和增强安全性，本文主要介绍JS的严格模式的用法，可以帮助大家避免一些常见的错误,需要的朋友可以参考下2023-05-05
这篇文章主要给大家介绍了关于理解JSONP并拓展的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-01-01
本篇文章主要介绍了IntelliJ IDEA 安装vue开发插件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了js 创建对象的多种方式与优缺点，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下2021-03-03
popdiv...2006-07-07
在Web开发中,获取用户地理位置是常见的需求,传统的HTML5 Geolocation API虽然精确,但需要用户授权,且移动端支持较好而桌面端较差,本文将介绍JavaScript如何通过IP地址获取用户精确位置,需要的朋友可以参考下2026-01-01
最新评论