前言

终于又到周末了，这次给大家分享一下可视化图表比较简单的图表但同时咱们又不得不学会的那就是————折线图。读完本篇文章你能够学到什么

js实现直线方程
折线图的表白
canvas 的一些小技巧

直线折线图

咱们先去十分有名的Echarts 官网看一看，他的折线图是什么样子的？如图：

从图中能够失去以下2d图形元素：

直线（两个端点是圆的）
直线（两个端点是直线的）
文字

如同仔细分析一下也没什么嘛，其实就是画直线和加文字。OK，问下本人canvas如何画直线？是不是有一个ctx.LineTo的办法，然而他画进去的是直线没有端点的所以呢？咱们以此根底进行封装，并且直线的端点的图形可控，同时还有文字位于直线的地位是不是能够画出这样的图形呢？咱们接下来进行实操环节。

画布的创立

第一步咱们必定是进行画布的创立，这里没什么好讲的。这里我在html 新建一个canvas, 我新建了一个类叫lineChart 间接上代码：

    class lineChart {        constructor(data, type) {          this.get2d()        }        get2d() {          const canvas = document.getElementById('canvas')          this.ctx = canvas.getContext('2d')        }      }

下面代码没什么好讲的，而后我在为canvas 画布设置背景色。代码如下：

    <style>      * {        padding: 0;        margin: 0;      }      canvas {        background: aquamarine;      }    </style>

canvas绘图操作温习

其实折线图，实质上就是一个画直线，只不过在原有画直线的能力上，给他做一些加强。我用一个画三角形的例子：带你相熟一下画线操作。

先看下api：

lineTo(x, y)
绘制一条从以后地位到指定x以及y地位的直线。

直线个别是由两个点组成的，该办法有两个参数：x以及y ，代表坐标系中直线完结的点。开始点和之前的绘制门路无关，之前门路的完结点就是接下来的开始点，等等。。。开始点也能够通过moveTo()函数扭转。

moveTo 是什么就在画布中挪动笔触，也就是你开始画的第一个点，或者你能够设想一下在纸上作业，一支钢笔或者铅笔的笔尖从一个点到另一个点的挪动过程。

moveTo(*x*, *y*)
将笔触挪动到指定的坐标x以及y上。

介绍结束，开始实战环节：

drawtriangle() {  this.ctx.moveTo(25, 25)  this.ctx.lineTo(105, 25)  this.ctx.lineTo(25, 105)}

咱们先挪动一个点，而后再画条直线，而后再画条直线。如果写到你认为完结了，你就错了

你还差一个很重要的一步就是画布描边或者是填充，我刚开始学也会遗记这个。

这里給大家整顿下canvas 的整个画图流程

首先，你须要创立门路起始点。
而后你应用画图命令去画出门路。
之后你把门路关闭。
一旦门路生成，你就能通过描边或填充门路区域来渲染图形。

也就是咱们方才所做的所有只是在筹备门路，所以咱们须要描边或者填充来渲染图形，咱们来看下这两个api。

// 通过线条来绘制图形轮廓。ctx.stroke() // 通过填充门路的内容区域生成实心的图形。ctx.fill()

咱们把填充加上去：看下成果:

咱们看下描边成果：

你会发现为什么没有闭合？,代码是这样的：

this.moveTo(25, 25)this.lineTo(105, 25)this.lineTo(25, 105)this.stroke()

这就阐明了一个重要问题就是什么呢？

描边是默认不闭合的，须要咱们手动闭合
填充默认会帮咱们闭合图形，并且填充

既然发现了问题，咱们就须要解决问题，那么canvas 如何闭合门路呢？？

closePath:
闭合门路之后图形绘制命令又从新指向到上下文中。

代码如下：

this.moveTo(25, 25)this.lineTo(105, 25)this.lineTo(25, 105)this.closePath()this.stroke()

这时候效果图曾经进去了：

有closePath？难道没有开始门路？答案是当然有的：

// 新建一条门路，生成之后，图形绘制命令被指向到门路上生成门路。this.beginPath()

这里会问这个有什么作用呢？

首先生成门路的第一步叫做beginPath()。实质上，门路是由很多子门路形成，这些子门路都是在一个列表中，所有的子门路（线、弧形、等等）形成图形。而每次这个办法调用之后，列表清空重置，而后咱们就能够从新绘制新的图形。

留神：以后门路为空，即调用beginPath()之后，或者canvas刚建的时候，第一条门路结构命令通常被视为是moveTo（），无论实际上是什么。出于这个起因，你简直总是要在设置门路之后专门指定你的起始地位。

closePath 其实也不是必须的，如果图形曾经是闭合的，就不须要调用，到这里canvas的根本绘图操作温习就到这里，前面还有一些实战api : 我就例子中给大家解说，不然会显得很僵硬。

封装画直线办法

再次之前，我把canvas中每一个点的地位都用一个point2d 点去示意并且写了一些办法,我在之前的文章都有认真讲过这里我就不开展说了： 3千字长文canvas实现任意正多边形的挪动（点、线、面）这一篇文章。这里我就间接放上代码：

export class Point2d {  constructor(x, y) {    this.x = x || 0    this.y = y || 0    this.id = ++current  }  clone() {    return new Point2d(this.x, this.y)  }  equal(v) {    return this.x === v.x && this.y === v.y  }  add2Map() {    pointMap.push(this)    return this  }  add(v) {    this.x += v.x    this.y += v.y    return this  }  abs() {    return [Math.abs(this.x), Math.abs(this.y)]  }  sub(v) {    this.x -= v.x    this.y -= v.y    return this  }  equal(v) {    return this.x === v.x && this.y === v.y  }  rotate(center, angle) {    const c = Math.cos(angle),      s = Math.sin(angle)    const x = this.x - center.x    const y = this.y - center.y    this.x = x * c - y * s + center.x    this.y = x * s + y * c + center.y    return this  }  distance(p) {    const [x, y] = this.clone().sub(p).abs()    return x * x + y * y  }  distanceSq(p) {    const [x, y] = this.clone().sub(p).abs()    return Math.sqrt(x * x + y * y)  }  static random(width, height) {    return new Point2d(Math.random() * width, Math.random() * height)  }  cross(v) {    return this.x * v.y - this.y * v.x  }}

别离对应的是一些静态方法、叉乘、两个点之间求间隔哇等等。

咱们先在画布上画一条根底的直线, 咱们先用random, 在画布上从新生成两个点，而后画出一条随机的直线，代码如下：

new lineChart().drawLine(  Point2d.random(500, 500),  Point2d.random(500, 500))// 画直线drawLine(start, end) {  const { x: startX, y: startY } = start  const { x: endX, y: endY } = end  this.beginPath()  this.moveTo(startX, startY)  this.lineTo(endX, endY)  this.stroke()}

js实现直线方程

 这里没有好展现的，咱们还是剖析下echarts 官网的折线图直线，直线两旁是两个圆的，想一想？其实这边波及到一个数学知识，各位小伙伴，Fly再一次化身数学老师给大家解说，次要是帮有些小伙伴温习温习。  这里咱们曾经晓得直线的开始点和完结点，在数学中咱们能够确定一条直线方程，那么咱们就能够求出直线上任意一点的（x,y）坐标。那么直线的两个端点的圆心咱们就能够确定？ 半径也能够确定了就是圆心别离到开始点和完结点的间隔。

第一步：实现直线方程

咱们先看下直线方程的几种表达方式：

个别式： Ax+By+C=0(A、B不同时为0)【实用于所有直线】
点斜式： y-y0=k(x-x0) 【实用于不垂直于x轴的直线】示意斜率为k，且过（x0,y0）的直线
截距式：x/a+y/b=1【实用于不过原点或不垂直于x轴、y轴的直线】
两点式：示意过（x1,y1）和(x2,y2)的直线　【实用于不垂直于x轴、y轴的直线】 (x1≠x2，y1≠y2)
两点式

这里很显著咱们适宜第四种：曾经晓得直线的起始点和完结点能够求出直线方程。我给出以下代码：

export function computeLine(p0, p1, t) {  let x1 = p0.x  let y1 = p0.y  let x2 = p1.x  let y2 = p1.y  // 阐明直线平行 y轴  if (x1 === x2) {    return new Point2d(x1, t)  }  // 平行X轴的状况  if (y1 === y2) {    return new Point2d(t, y1)  }  const y = ((t - x1) / (x2 - x1)) * (y2 - y1) + y1  return new Point2d(t, y)}

p0、p1、对应的两个直线点 t 就是参数，对应直线的x,咱们求出y，返回新的点就好了。咱们默认以开始点和完结点的 x 地位别离减去或者加一个固定的值，求得圆心。间接看下图吧：

这个图曾经很显著了， 1和2 之间的间隔就是半径，所以咱们只要求出点1 和点4 如同就OK了， canvas 中是怎么画圆呢有一个arc 这个api :

arc(x, y, radius, startAngle, endAngle, anticlockwise)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle完结，依照anticlockwise给定的方向（默认为顺时针）来生成。

留神：arc()函数中示意角的单位是弧度，不是角度。角度与弧度的js表达式:
弧度=(Math.PI/180)*角度。

圆必定就是从0-360度，代码如下：

drawCircle(center, radius = 4) {  const { x, y } = center  this.ctx.beginPath()  this.ctx.arc(x, y, radius, 0, Math.PI * 2, true) // 绘制  this.ctx.fill()}

筹备工作都做好了，咱们就开始实现话带圆的直线吧。画图的步骤就是

先画开始圆
画直线
画完结圆

画开始圆和画完结圆其实能够封装成一个办法：他们最次要的区别其实就是起始点的不同，代码如下：

drawLineCircle(start, end, type) {  const flag = type === 'left'  const { x: startX, y: startY } = start  const { x: endX, y: endY } = end  const center = this.getOnePointOnLine(    start.clone(),    end.clone(),    flag ? startX - this.distance : endX + this.distance  )  // 两点之间的间隔  不相熟的小伙伴能够看下下面的文章  const radius = (flag ? start : end).clone().distanceSq(center)  this.drawCircle(center, radius)}

这样咱们就能够画圆了。先看下效果图：

到这里咱们就曾经完结了折线图的第一个局部，紧接着进入第二局部：

画XY坐标轴

坐标轴实质上就是两条直线，所以第一步确定坐标原点，而后以坐标原点画出垂直和程度的两条直线。咱们设置坐标原点离画布的左内边距和底部内边距，这样咱们能够通过画布的高度减去底部内边距失去原点的y, 而后通过画布的宽度减去左内边距失去x, 有了坐标原点画坐标轴就没什么大问题了。代码如下：

  //定义坐标轴绝对于画布的内边距  this.paddingLeft = 30 // 至多大于绘制文字的宽度  this.paddingBottom = 30 // 至多大于绘制文字的高度  this.origin = new Point2d(    this.paddingLeft,    this.height - this.paddingBottom  )  this.drawCircle(this.origin, 1, 'red')  this.addxAxis()  this.addyAxis()  // 画 x 轴  addxAxis() {    const end = this.origin      .clone()      .add(new Point2d(this.width - this.paddingLeft * 2, 0))    this.drawLine(this.origin, end)  }    // 画y轴  addyAxis() {    const end = this.origin      .clone()      .sub(new Point2d(0, this.height - this.paddingBottom * 2))    this.drawLine(this.origin, end)  }

这里要特地提醒的是首先整个画布的坐标轴是在整个屏幕的左上方，然而咱们显示的坐标原点是在左下方，而后画Y轴的时候是由原点向上减去，是向量点的减法。

效果图如下：

然而和echarts 那个不太一样，他的x轴是有线段的和文字的，接下来咱们就开始革新 x轴。就是将X轴分几段嘛，

而后生成一个点的汇合，这些点的y都是雷同的, 而后 x是不雷同的。代码如下：

 drawLineWithDiscrete(start, end, n = 5) {    // 因为 x 轴上的 y 都是雷同的    const points = []    const startX = start.x    const endX = end.x    points.push(start)    const segmentValue = (endX - startX) / n    for (let i = 1; i <= n - 1; i++) {      points.push(new Point2d(startX + i * segmentValue, start.y))    }    points.push(end)    // 生成线段    points.forEach((point) => {      this.drawLine(point, point.clone().add(new Point2d(0, 5)))    })  }

这里要留神的就是循环的个数，因为起始点和终止点是有的。看下效果图：

这时候还差文字，canvas 绘制文字的api

在指定的(x,y)地位填充指定的文本，绘制的最大宽度是可选的.ctx.fillText（text,x,y,[,maxwidth]）

所以说白了还是去计算文字点的坐标，首先在我的项目初始化的定义X轴和Y轴的数据。代码如下：

 this.axisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] this.yxisData = ['0', '50', '100', '150', '200', '250', '300']

文字咱们对立放在线段的中点处其实只有计算每个分段数的长度而后在端点处+分段数长度的一半就能够失去。代码如下：

// 生成X轴文字的点const segmentValue = (endX - startX) / nfor (let i = 0; i <= n - 1; i++) {  const textpoint = new Point2d(    startX + i * segmentValue + segmentValue / 2,    start.y + 20  )  // 这里每个点的文字与X轴数据是相互响应的  textPoints.push({    point: textpoint,    text: this.axisData[i],  })}// 生成文字this.clearFillColor()textPoints.forEach((info) => {  const { text, point } = info  this.ctx.fillText(text, point.x, point.y)})

效果图如下：

然而看着图如同文字并没有处于居中的地位，胖虎思考了一下，其实因为文字也有长度，所以每一个文字的坐标要减去文字长度的一半值就对了。这时候this.ctx.fillText 的第三个参数就显得非常重要了，限度文字的长度，这样咱们就能够解决了，代码从新批改下：

// 限度文字的长度this.ctx.fillText(text, point.x, point.y, 20)// 文字的每个点要减去长度的一半const textpoint = new Point2d(  startX + i * segmentValue + segmentValue / 2 - 10,  start.y + 20)

间接看效果图：

这下看一下就是完满。

X轴的解决好了，咱们解决Y轴，Y轴其实绝对比较简单就是每个数据对应的一条直线。

Y轴的话也是要计算每个线段的长度的值，而后画出直线，这里要特地留神的是就是文字的搁置，在每个端点还要进行微调。使得文字和直线居中对齐。代码如下：

addyAxis() {  const end = this.origin    .clone()    .sub(new Point2d(0, this.height - this.paddingBottom * 2))  const points = []  const length = this.origin.y - end.y  const segmentValue = length / this.yxisData.length  for (let i = 0; i < this.yxisData.length; i++) {    const point = new Point2d(end.x, this.origin.y - i * segmentValue)    points.push({      point,      text: this.yxisData[i],    })  }  points.forEach((info) => {    const { text, point } = info    const end = point      .clone()      .add(new Point2d(this.width - this.paddingLeft * 2, 0))    this.setStrokeColor('#E0E6F1')    this.drawLine(point, end)    this.clearStrokeColor()    this.ctx.fillText(text, point.clone().x - 30, point.y + 4, 20)  })}

因为过程和X轴十分相似，揭示一下描边设置后，要将它复原默认，不然会援用上一个色彩哦。

如图：

整个画布就差最初一步了，生成折线图，咱们在下面曾经封装了，带圆的直线，所以只有找到所有的点去画折线图就好了。首先每个点的X坐标没什么问题对应的就是每个文字的中点，次要是Y轴的坐标：回顾一下之前咱们是怎么去计算Y轴的坐标的是，长度/ 除以分段数去计算的。这样就导致一个问题，进去的后果可能是一个小数，因为咱们理论的数据可能是223 这种这样导致画进去的图形点误差太大，所以为了缩小误差，我换一个计算模式，就是进行等分，这样在区间外面的点都能够表白，误差能够略微小点，其实在理论我的项目中，容差问题是计算必定存在的问题，js 自身就有0.1+0.2 这样的问题，所以或者说在容差范畴内咱们能够认为这两个点是等价的代码如下：

const length = this.origin.y - end.yconst division = length / 300const point = new Point2d(end.x, this.origin.y - i * division * 50)

而后我这时候引入实在的数据：

this.realData = [150, 230, 224, 218, 135, 147, 260]this.xPoints = []this.yPoints = []

别离对应的是实在的数据， xPoints是什么文字的中点坐标代码如下：

// 生成文字this.clearFillColor()textPoints.forEach((info) => {  const { text, point } = info  this.xPoints.push(point.x)  this.ctx.fillText(text, point.x, point.y, 20)})

yPoints其实也就比较简单了，实在数据 * 每一份的间隔就好了。

const division = length / 300for (let i = 0; i < this.yxisData.length; i++) {  const point = new Point2d(end.x, this.origin.y - i * division * 50)  // 在这里， 还是得留神坐标轴的地位   const realData = this.realData[i]  this.yPoints.push(this.origin.y - realData * division)  points.push({    point,    text: this.yxisData[i],  })}

数据筹备好了，咱们就开始调用办法去画折线图：

let start = new Point2d(this.xPoints[0], this.yPoints[0])// 生成折线图this.setStrokeColor('#5370C6')this.xPoints.slice(1).forEach((x, index) => {  const end = new Point2d(x, this.yPoints[index + 1])  this.drawLineWithCircle(start, end)  start = end})

这段代码须要留神的是默认找一个开始点，而后一直地去更改开始点，而后留神下标地位。

如图：

目前存在的问题：

存在的圆点反复
圆点的半径大小不统一，阐明咱们之前计算圆心到直线的间隔这样设为半径是谬误的，因为每条的线的斜率是不一样的。所以算进去是有问题的。

到这里打大家能够这么去思考，为什么圆和直线要捆绑在一起? 独自画不就没有这样的问题了。说干就干，

let start = new Point2d(this.xPoints[0], this.yPoints[0])this.drawCircle(start)// 生成折线图this.setStrokeColor('#5370C6')this.xPoints.slice(1).forEach((x, index) => {  const end = new Point2d(x, this.yPoints[index + 1])  // 画圆  this.drawCircle(end)  // 画直线  this.drawLine(start, end)  start = end})

这里留神会少一个开始圆，咱们在结尾的间接补上就好了，圆的半径我都对立设置了。

如图：

至此到这里，这折线图全副实现，为了做的更完满一点，我还是减少的提醒和虚线。

显示tooltip

这里我看大多数图表都在鼠标挪动的时候都会显示一个虚线和提醒，不然我怎么革除的看数据对吧。咱们还是初始化一个div将它的款式设置为暗藏。

#tooltip {  position: absolute;  z-index: 2;  background: white;  padding: 10px;  border-radius: 2px;  visibility: hidden;}<div id="tooltip"></div>

为canvas 减少监听事件：

canvas.addEventListener('mousemove', this.onMouseMove.bind(this))// 这里取绝对于画布原点的地位 offset onMouseMove(e) {  const x = e.offsetX  const y = e.offsetY}

其实咱们要做的事件非常简单首先咱们就是去比拟鼠标的点和理论的点在某个范畴内我就显示，相似于吸附，从用户的角度不可能齐全挪动到那里才显示。

代码如下：

onMouseMove(e) {  const x = e.offsetX  const find = this.xPoints.findIndex(    (item) => Math.abs(x - item) <= this.tolerance  )  if (find > -1) {    this.tooltip.textContent = `数据：${this.axisData[find]}_ ${this.yxisData[find]}`    this.tooltip.style.visibility = 'visible'    this.tooltip.style.left = e.clientX + 2 + 'px'    this.tooltip.style.top = e.clientY + 2 + 'px'  } else {    this.tooltip.style.visibility = 'hidden'  }}

这里其实只有比拟x的地位就好了,容差能够自定义设置。

画垂直的虚线

我看了很多图表他们都有垂直的虚线，这里就波及到一个问题canvas 如何画虚线，我在用canvas 实现矩形的挪动（点、线、面）（1）这篇文章有介绍，我就间接拿过去，不过多解释了，感兴趣的小伙伴能够看下这篇文章。代码如下：

drawDashLine(start, end) {  if (!start || !end) {    return  }  this.ctx.setLineDash([5, 10])  this.beginPath()  this.moveTo(start.x, start.y)  this.lineTo(end.x, end.y)  ctx.stroke()}

咱们对onMouseMove 再一次进行革新：

onMouseMove(e) {  const x = e.offsetX  const find = this.xPoints.findIndex(    (item) => Math.abs(x - item) <= this.tolerance  )  if (find > -1) {    this.tooltip.textContent = `数据：${this.axisData[find]}_ ${this.yxisData[find]}`    this.tooltip.style.visibility = 'visible'    this.tooltip.style.left = e.clientX + 2 + 'px'    this.tooltip.style.top = e.clientY + 2 + 'px'    // 画虚线    const start = new Point2d(this.xPoints[find], this.origin.y)    const end = new Point2d(this.xPoints[find], 0)    this.drawDashLine(start, end)  } else {    this.tooltip.style.visibility = 'hidden'  }}

减少了以下代码，然而这样是有问题的，就是咱们鼠标不停的挪动，所以上一次绘制的虚线不会勾销。会呈现上面这种状况：

所以我做了一个数据革除同时革除画布上的货色从新画：

clearData() {  this.ctx.clearRect(0, 0, 600, 600)  this.xPoints = []  this.yPoints = []}

整体代码如下：

const start = new Point2d(this.xPoints[find], this.origin.y)const end = new Point2d(this.xPoints[find], 0)// 革除数据this.clearData()this.drawDashLine(start, end)// 虚线款式也要每次革除 不然会影响上面的画的款式this.ctx.setLineDash([])this.addxAxis()this.addyAxis()this.setStrokeColor('#5370C6')this.generateLineChart()

restore和save的妙用

再给出一个小技巧**，其实canvas 中画图如果某次的样只想在某一个绘制中起作用：有save 和 restore办法

应用 save() 办法保留以后的状态，应用 restore() 进行复原成一开始的样子

所以咱们能够从新改写下画虚线的办法，在一开始的时候svae 一下，而后完结在 restore ，有点像栈的感觉，先进去，而后画完结，弹出来。每一项都有本人的独特的画图状态，不影响其余项。

drawDashLine(start, end) {    if (!start || !end) {      return    }    this.ctx.save()    this.ctx.setLineDash([5, 10])    this.beginPath()    this.moveTo(start.x, start.y)    this.lineTo(end.x, end.y)    this.stroke()    this.ctx.restore()  }

至此整个折线图我想给大家解说的曾经完结了，咱们看下成果吧：

最初

本篇文章算是canvas实现可视化图表的第一篇吧，前面我会继续分享、饼图、树状图、K线图等等各种可视化图表，我自

己在写文章的同时也在一直地思考，怎么去表白的更好。如果你对可视化感兴趣，点赞珍藏关注吧！，能够关注我下

面的数据可视化专栏，每周分享一篇文章，要么是2d、要么是three.js的。我会用心创作每一篇文章，绝不水文。

最初一句话：大家和我一起做一个Api的创造者而不是调用者！

源码下载

本篇文章例子的所有代码都在我的github上，欢送star☆！如果你对图形感兴趣，能够关注我的公众号【前端图形】，支付可视化学习材料哦！！咱们下期再见