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 相关文章推荐
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
Vue 实现拨打电话操作
Nov 16 Javascript
详细聊聊vue中组件的props属性
Nov 02 Vue.js
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
mysql5写入和读出乱码解决
2006/11/25 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
JS模拟多线程
2007/02/07 Javascript
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
Python字符串转换成浮点数函数分享
2015/07/24 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
对python周期性定时器的示例详解
2019/02/19 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
python实现图片素描效果
2020/09/26 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
python 实现批量图片识别并翻译
2020/11/02 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
小学体育教学反思
2014/01/31 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
离婚案件答辩状
2015/05/22 职场文书
冲出亚马逊观后感
2015/06/03 职场文书