快捷導(dǎo)航

JavaScript canvas繪制折線圖

更新時(shí)間：2020年02月18日 09:17:18 作者：碼農(nóng)陽神

這篇文章主要為大家詳細(xì)介紹了JavaScript canvas繪制折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了canvas繪制折線圖的具體代碼，供大家參考，具體內(nèi)容如下

<!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.構(gòu)造函數(shù)*/
 var LineChart = function (ctx) {
 /*獲取繪圖工具*/
 this.ctx = ctx || document.querySelector('canvas').getContext('2d');
 /*畫布的大小*/
 this.canvasWidth = this.ctx.canvas.width;
 this.canvasHeight = this.ctx.canvas.height;
 /*網(wǎng)格的大小*/
 this.gridSize = 10;
 /*坐標(biāo)系的間距*/
 this.space = 20;
 /*坐標(biāo)原點(diǎn)*/
 this.x0 = this.space;
 this.y0 = this.canvasHeight - this.space;
 /*箭頭的大小*/
 this.arrowSize = 10;
 /*繪制點(diǎn)*/
 this.dottedSize = 6;
 /*點(diǎn)的坐標(biāo) 和數(shù)據(jù)有關(guān)系 數(shù)據(jù)可視化*/
 }
 /*2.行為方法*/
 LineChart.prototype.init = function (data) {
 this.drawGrid();
 this.drawAxis();
 this.drawDotted(data);
 };
 /*繪制網(wǎng)格*/
 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();
 }
 };
 /*繪制坐標(biāo)系*/
 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();
 };
 /*繪制所有點(diǎn)*/
 LineChart.prototype.drawDotted = function (data) {
 /*1.數(shù)據(jù)的坐標(biāo) 需要轉(zhuǎn)換 canvas坐標(biāo)*/
 /*2.再進(jìn)行點(diǎn)的繪制*/
 /*3.把線連起來*/
 var that = this;
 /*記錄當(dāng)前坐標(biāo)*/
 var prevCanvasX = 0;
 var prevCanvasY = 0;
 data.forEach(function (item, i) {
 /* x = 原點(diǎn)的坐標(biāo) + 數(shù)據(jù)的坐標(biāo) */
 /* y = 原點(diǎn)的坐標(biāo) - 數(shù)據(jù)的坐標(biāo) */
 var canvasX = that.x0 + item.x;
 var canvasY = that.y0 - item.y;
 /*繪制點(diǎn)*/
 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();
 /*點(diǎn)的連線*/
 /*當(dāng)時(shí)第一個(gè)點(diǎn)的時(shí)候 起點(diǎn)是 x0 y0*/
 /*當(dāng)時(shí)不是第一個(gè)點(diǎn)的時(shí)候 起點(diǎn)是 上一個(gè)點(diǎn)*/
 if(i == 0){
 that.ctx.beginPath();
 that.ctx.moveTo(that.x0,that.y0);
 that.ctx.lineTo(canvasX,canvasY);
 that.ctx.stroke();
 }else{
 /*上一個(gè)點(diǎn)*/
 that.ctx.beginPath();
 that.ctx.moveTo(prevCanvasX,prevCanvasY);
 that.ctx.lineTo(canvasX,canvasY);
 that.ctx.stroke();
 }
 /*記錄當(dāng)前的坐標(biāo)，下一次要用*/
 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>

運(yùn)行結(jié)果如下：