脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js canvas折线图

JavaScript canvas绘制折线图

 更新时间：2020年02月18日 09:17:18   作者：码农阳神  
这篇文章主要为大家详细介绍了JavaScript canvas绘制折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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如何实现组合列表框中元素移动效果

    JavaScript如何实现组合列表框中元素移动效果

    在页面中有两个列表框，需要把其中一个列表框的元素移动到另一个列表框，怎么实现此功能呢，下面通过本文给大家介绍JavaScript如何实现组合列表框中元素移动效果，感兴趣的朋友一起学习吧
    2016-03-03
  • JavaScript使用Math.Min返回两个数中较小数的方法

    JavaScript使用Math.Min返回两个数中较小数的方法

    这篇文章主要介绍了JavaScript使用Math.Min返回两个数中较小数的方法,涉及javascript中Math.Min方法的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 实现变速回到顶部的JavaScript代码

    实现变速回到顶部的JavaScript代码

    一般网页的下方都会放置一个置顶按钮, 尤其是页面底部没有导航的网页, 这样可以帮助访客重新找到导航或者重温一遍广告 (想得真美).
    2011-05-05
  • javascript中length属性的探索

    javascript中length属性的探索

    本文中，我将会通过类数组对象（array like object），探索javascript中的length属性的一些秘密。
    2011-07-07
  • JS实现双击内容变为可编辑状态

    JS实现双击内容变为可编辑状态

    在一些网站上我们经常看到交互性很强的功能。一些用户资料可以直接双击出现文本框，并在此输入新的资料即可修改，无需再按确定按钮等。怎么实现的呢？今天小编给大家分享JS实现双击内容变为可编辑状态，需要的的朋友参考下
    2017-03-03
  • 微信小程序获取公众号文章列表及显示文章的示例代码

    微信小程序获取公众号文章列表及显示文章的示例代码

    这篇文章主要介绍了微信小程序获取公众号文章列表及显示文章的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • JavaScript中的高级函数

    JavaScript中的高级函数

    在JavaScript中，函数的功能十分强大，除了函数相关的基础知识外，掌握一些高级函数并应用起来，不仅能让JS代码看起来更为精简，还可以提升性能，本文是小编总结的一些常用的、重要的函数
    2018-01-01
  • 如何实现小程序tab栏下划线动画效果

    如何实现小程序tab栏下划线动画效果

    这篇文章主要介绍了如何实现小程序tab栏下划线动画效果,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 判断横屏竖屏（三种）

    判断横屏竖屏（三种）

    本文主要介绍了通过HTML，CSS，JS三种判断横屏竖屏的方法。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • 前台js改变Session的值(用ajax实现)

    前台js改变Session的值(用ajax实现)

    前台js改变Session的值,有很多的新手朋友对此问题会很陌生，本文将提供解决方法，需要了解的朋友可以参考下
    2012-12-12

最新评论