绘制折线图

之前在工作的时候,用过百度的ECharts绘制折线图,上手很简单,这里通过canvas绘制一个简单的折线图。这里将一整个绘制过程分为几个步骤:

1、绘制网格 2、绘制坐标系 3、绘制点 4、将前面三部分组合绘制一整个完整的折线图。

一、绘制网格

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        canvas {

            border: 1px solid #00CED1;

        }

    </style>

</head>

<body>

<canvas width="600" height="400"></canvas>

<script>

    var myCanvas = document.querySelector('canvas');

    var ctx = myCanvas.getContext('2d');

    /*1.绘制网格*/

    /*2.网格的大小*/

    var gridSize = 10;

    var canvasHeight = ctx.canvas.height;

    var canvasWidth = ctx.canvas.width;

    /*3.画多少条X轴方向的线 X轴的条数 = 画布高度/网格大小*/

    var xLineTotal = Math.floor(canvasHeight / gridSize);

    for (var i = 0; i <= xLineTotal; i++) {

        ctx.beginPath();

        ctx.moveTo(0, i * gridSize);

        ctx.lineTo(canvasWidth, i * gridSize);

        ctx.strokeStyle = '#eee';

        ctx.stroke();

    }

    /*4.画多少条Y轴方向的线  Y轴的条数 = 画布宽度/网格大小*/

    var yLineTotal = Math.floor(canvasWidth / gridSize);

    for (var i = 0; i <= yLineTotal; i++) {

        ctx.beginPath();

        ctx.moveTo(i*gridSize ,0);

        ctx.lineTo(i*gridSize ,canvasHeight);

        ctx.strokeStyle = '#eee';

        ctx.stroke();

    }

</script>

</body>

</html>

运行结果

二、绘制坐标系

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        canvas {

            border: 1px solid #00CED1;

        }

    </style>

</head>

<body>

<canvas width="600" height="400"></canvas>

<script>

    var myCanvas = document.querySelector('canvas');

    var ctx = myCanvas.getContext('2d');

    /*1.绘制坐标系*/

    /*2.确定原点*/

    /*3.确定距离画布旁边的距离*/

    /*4.确定坐标轴的长度*/

    /*5.确定箭头的大小  是个等腰三角形  10 */

    /*6.绘制箭头填充*/

    var space = 20;

    var arrowSize = 10;

    /*计算原点*/

    var canvasWidth = ctx.canvas.width;

    var canvasHeight = ctx.canvas.height;

    //原点坐标

    var x0 = space;

    var y0 = canvasHeight - space;

    /*绘制x轴*/

    ctx.beginPath();

    ctx.moveTo(x0, y0);

    ctx.lineTo(canvasWidth - space, y0);

    /*箭头 三角形 原点 左下 左上 原点*/

    ctx.lineTo(canvasWidth - space - arrowSize, y0 + arrowSize / 2);

    ctx.lineTo(canvasWidth - space - arrowSize, y0 - arrowSize / 2);

    ctx.lineTo(canvasWidth - space, y0);

    //填充

    ctx.fill();

    ctx.stroke();

    /*绘制y轴*/

    ctx.beginPath();

    ctx.moveTo(x0, y0);

    ctx.lineTo(space, space);

    /*箭头*/

    ctx.lineTo(space + arrowSize / 2, space + arrowSize);

    ctx.lineTo(space - arrowSize / 2, space + arrowSize);

    ctx.lineTo(space, space);

    ctx.fill();

    ctx.stroke();

</script>

</body>

</html>

运行结果

三、绘制点

代码

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        canvas {

            border: 1px solid #00CED1;

        }

    </style>

</head>

<body>

<canvas width="600" height="400"></canvas>

<script>

    var myCanvas = document.querySelector('canvas');

    var ctx = myCanvas.getContext('2d');

    /*1.绘制点*/

    /*2.点的尺寸*/

    /*3.以坐标中心绘制点*/

    /*点坐标*/

    var coordinate = {

        x:100,

        y:100

    }

    /*点尺寸*/

    var dottedSize = 10;

    //相对于正方形 左上 -> 右上 -> 右下 -> 左下

    ctx.moveTo(coordinate.x - dottedSize / 2,coordinate.y - dottedSize / 2);

    ctx.lineTo(coordinate.x + dottedSize / 2,coordinate.y - dottedSize / 2);

    ctx.lineTo(coordinate.x + dottedSize / 2,coordinate.y + dottedSize / 2);

    ctx.lineTo(coordinate.x - dottedSize / 2,coordinate.y + dottedSize / 2);

    ctx.closePath();

    ctx.fill();

</script>

</body>

</html>

运行结果

四、完整折线图

先展示效果。

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        canvas {

            border: 1px solid #00CED1;

        }

    </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);

            this.ctx.lineTo(this.canvasWidth, i * this.gridSize);

            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);

            this.ctx.lineTo(i * this.gridSize, 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>

```
别人骂我胖，我会生气，因为我心里承认了我胖。别人说我矮，我就会觉得好笑，因为我心里知道我不可能矮。这就是我们为什么会对别人的攻击生气。
攻我盾者，乃我内心之矛(10)
```

【Canvas】(2)---绘制折线图的更多相关文章

canvas+js绘制折线图
效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
使用canvas来绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
canvas学习之折线图
接着上一张柱状图讲,我们是使用折线图: import {canvasPoint} from '../../assets/js/canvas';import {basicInfo,histogramMo ...
用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Android自己定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...
【带着canvas去流浪】（2）绘制折线图
目录一. 任务说明二. 重点提示三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图四. 大数据量场景示例代码托管在:https://github.com/dashnowo ...
Android自定义控件 -Canvas绘制折线图(实现动态报表效果)
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
Android自定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
带着canvas去流浪系列之二绘制折线图
[摘要] 用canvasAPI实现echarts简易图表示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明使用原生canvasAPI绘制 ...

随机推荐

二维数组及Arrays工具类
1.二维数组概念: 数组中的每一个元素类型都是一维数组二维数组初始化方式: 静态初始化: 格式: 元素类型[][] 数组名 = new 元素类型[][]{{一维数组1},{一维数组2},{一维数组 ...
【Unity游戏开发】跟着马三一起魔改LitJson
一.引子在游戏开发中,我们少不了和数据打交道,数据的存储格式可谓是百花齐放,xml.json.csv.bin等等应有尽有.在这其中Json以其小巧轻便.可读性强.兼容性好等优点受到广大程序员的喜爱. ...
TensorFlow-Bitcoin-Robot:一个基于 TensorFlow LSTM 模型的 Bitcoin 价格预测机器人。
简介 TensorFlow-Bitcoin-Robot:一个基于 TensorFlow LSTM 模型的 Bitcoin 价格预测机器人. 文章包括一下几个部分: 1.为什么要尝试做这个项目? 2.为 ...
arcgis10.4.X的oracle数据库要求
受支持的数据库版本:(标准版/标准独立版/企业版) Oracle 11g R2(64 位)11.2.0.4 Oracle 12c R1(64 位)12.1.0.2 受支持的操作系统: 数据库支持的操 ...
解决pycharm不能导入bs4模块问题
问题描述: 在导入bs4模块时有报错提示 “ Traceback (most recent call last): File "E:/project/code/py-pengfu/py-pf ...
ajax实现图片上传与进度条
这里使用的是bootstract的一个插件来实现详情请查看文档中的进度条 https://v3.bootcss.com/components/ 引入必要的文件 <link href=" ...
C 2010年笔试题
1 有一个函数, 写一段程序,输入的值,输出的值. #include <stdio.h> void main() { int x,y; printf("输入x:"); ...
mavlink协议移植问题
mavlink协议移植问题 mavlink源代码是一个代码库,使用的时候只需要将mavlink.h头文件包含到工程项目中即可. mavlink通信协议是无状态的连接,一般采用心跳消息跟踪系统是否存在. ...
LLVM 编码规范 - 中文翻译
LLVM 编码规范导论语言.库和标准 C++ 标准版本 C++ 标准库 Go 代码准则机械的代码问题代码格式化注释头文件类概述 method information 注释格式化使用Do ...
【学习笔记】CART算法
1. 背景介绍 CART(Classification and Regression Trees,分类回归树)算法是一种树构建算法,既可以用于分类,也可以用于回归.它的工作原理是:使用二元切分来处理连 ...

【Canvas】(2)---绘制折线图

绘制折线图

一、绘制网格

二、绘制坐标系

三、绘制点

四、完整折线图

【Canvas】(2)---绘制折线图的更多相关文章

随机推荐

热门专题