JavaScript canvas绘制折线图


Posted in Javascript onFebruary 18, 2020

本文实例为大家分享了canvas绘制折线图的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 canvas {
 border: 1px solid #ccc;
 }
 </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
 /*1.构造函数*/
 var LineChart = function (ctx) {
 /*获取绘图工具*/
 this.ctx = ctx || document.querySelector('canvas').getContext('2d');
 /*画布的大小*/
 this.canvasWidth = this.ctx.canvas.width;
 this.canvasHeight = this.ctx.canvas.height;
 /*网格的大小*/
 this.gridSize = 10;
 /*坐标系的间距*/
 this.space = 20;
 /*坐标原点*/
 this.x0 = this.space;
 this.y0 = this.canvasHeight - this.space;
 /*箭头的大小*/
 this.arrowSize = 10;
 /*绘制点*/
 this.dottedSize = 6;
 /*点的坐标 和数据有关系 数据可视化*/
 }
 /*2.行为方法*/
 LineChart.prototype.init = function (data) {
 this.drawGrid();
 this.drawAxis();
 this.drawDotted(data);
 };
 /*绘制网格*/
 LineChart.prototype.drawGrid = function () {
 /*x方向的线*/
 var xLineTotal = Math.floor(this.canvasHeight / this.gridSize);
 this.ctx.strokeStyle = '#eee';
 for (var i = 0; i <= xLineTotal; i++) {
 this.ctx.beginPath();
 this.ctx.moveTo(0, i * this.gridSize - 0.5);
 this.ctx.lineTo(this.canvasWidth, i * this.gridSize - 0.5);
 this.ctx.stroke();
 }
 /*y方向的线*/
 var yLineTotal = Math.floor(this.canvasWidth / this.gridSize);
 for (var i = 0; i <= yLineTotal; i++) {
 this.ctx.beginPath();
 this.ctx.moveTo(i * this.gridSize - 0.5, 0);
 this.ctx.lineTo(i * this.gridSize - 0.5, this.canvasHeight);
 this.ctx.stroke();
 }
 };
 /*绘制坐标系*/
 LineChart.prototype.drawAxis = function () {
 /*X轴*/
 this.ctx.beginPath();
 this.ctx.strokeStyle = '#000';
 this.ctx.moveTo(this.x0, this.y0);
 this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
 this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 + this.arrowSize / 2);
 this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 - this.arrowSize / 2);
 this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
 this.ctx.stroke();
 this.ctx.fill();
 /*Y轴*/
 this.ctx.beginPath();
 this.ctx.strokeStyle = '#000';
 this.ctx.moveTo(this.x0, this.y0);
 this.ctx.lineTo(this.space, this.space);
 this.ctx.lineTo(this.space + this.arrowSize / 2, this.space + this.arrowSize);
 this.ctx.lineTo(this.space - this.arrowSize / 2, this.space + this.arrowSize);
 this.ctx.lineTo(this.space, this.space);
 this.ctx.stroke();
 this.ctx.fill();
 };
 /*绘制所有点*/
 LineChart.prototype.drawDotted = function (data) {
 /*1.数据的坐标 需要转换 canvas坐标*/
 /*2.再进行点的绘制*/
 /*3.把线连起来*/
 var that = this;
 /*记录当前坐标*/
 var prevCanvasX = 0;
 var prevCanvasY = 0;
 data.forEach(function (item, i) {
 /* x = 原点的坐标 + 数据的坐标 */
 /* y = 原点的坐标 - 数据的坐标 */
 var canvasX = that.x0 + item.x;
 var canvasY = that.y0 - item.y;
 /*绘制点*/
 that.ctx.beginPath();
 that.ctx.moveTo(canvasX - that.dottedSize / 2, canvasY - that.dottedSize / 2);
 that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY - that.dottedSize / 2);
 that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY + that.dottedSize / 2);
 that.ctx.lineTo(canvasX - that.dottedSize / 2, canvasY + that.dottedSize / 2);
 that.ctx.closePath();
 that.ctx.fill();
 /*点的连线*/
 /*当时第一个点的时候 起点是 x0 y0*/
 /*当时不是第一个点的时候 起点是 上一个点*/
 if(i == 0){
 that.ctx.beginPath();
 that.ctx.moveTo(that.x0,that.y0);
 that.ctx.lineTo(canvasX,canvasY);
 that.ctx.stroke();
 }else{
 /*上一个点*/
 that.ctx.beginPath();
 that.ctx.moveTo(prevCanvasX,prevCanvasY);
 that.ctx.lineTo(canvasX,canvasY);
 that.ctx.stroke();
 }
 /*记录当前的坐标,下一次要用*/
 prevCanvasX = canvasX;
 prevCanvasY = canvasY;
 });
 };
 /*3.初始化*/
 var data = [
 {
 x: 100,
 y: 120
 },
 {
 x: 200,
 y: 160
 },
 {
 x: 300,
 y: 240
 },
 {
 x: 400,
 y: 120
 },
 {
 x: 500,
 y: 80
 }
 ];
 var lineChart = new LineChart();
 lineChart.init(data);
</script>
</body>
</html>

运行结果如下:

JavaScript canvas绘制折线图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
node+multer实现图片上传的示例代码
Feb 18 #Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 #Javascript
javascript中的with语句学习笔记及用法
Feb 17 #Javascript
JS实现百度搜索框关键字推荐
Feb 17 #Javascript
js实现百度淘宝搜索功能
Feb 17 #Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 #Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 #Javascript
You might like
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python字符串处理实现单词反转
2017/06/14 Python
详解python中init方法和随机数方法
2019/03/13 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
关于中国梦的演讲稿
2014/04/23 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
舞蹈专业求职信
2014/06/13 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
皇城相府导游词
2015/02/06 职场文书
民事答辩状格式范文
2015/05/21 职场文书
2016继续教育研修日志
2015/11/13 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python