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 相关文章推荐
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 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 Mssql操作简单封装支持存储过程
2009/12/11 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
php探针不显示内存解决方法
2019/09/17 PHP
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
python3中property使用方法详解
2019/04/23 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
python实现数字炸弹游戏
2020/07/17 Python
python中取绝对值简单方法总结
2020/07/24 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
Python实现京东抢秒杀功能
2021/01/25 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
在校生自我鉴定
2014/01/23 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
校运会入场式解说词
2014/02/10 职场文书
大型会议策划方案
2014/05/17 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2015年安全生产责任书
2015/01/30 职场文书
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS