繪制折線圖
之前在工作的時候,用過百度的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) ```