一、畫折線圖需要有如下準備如下： 1、繪製網格 2、繪製坐標系 3、繪製點 4、點連線就成了折線圖 二、繪製網格 1、確認網格（每個格子）的大小 2、確認X軸方向有多少條橫線 3、確認Y軸方向有多少條豎線 4、遍歷畫出來 <!DOCTYPE html> <html lang="en"> <head> ...
一、畫折線圖需要有如下準備如下：
1、繪製網格
2、繪製坐標系
3、繪製點
4、點連線就成了折線圖
二、繪製網格
1、確認網格（每個格子）的大小
2、確認X軸方向有多少條橫線
3、確認Y軸方向有多少條豎線
4、遍歷畫出來
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector("canvas");
var ctx = myCanvas.getContext("2d");
// 確認網格的大小
var grid = 10;
// x軸方向畫多少條橫線
var canvasHeight = ctx.canvas.height;
var xLineTotal = Math.floor(canvasHeight / grid);
// y軸方向畫多少條豎線
var canvasWidth = ctx.canvas.width;
var yLineTotal = Math.floor(canvasWidth / grid);
// 遍歷
// 遍歷橫線
for(var i = 0; i <= xLineTotal; i++){
ctx.beginPath();
ctx.moveTo(0, i * grid - 0.5);
ctx.lineTo(canvasWidth, i * grid -0.5);
ctx.strokeStyle = "#ddd";
ctx.stroke();
}
// 遍歷豎線
for(var i = 0; i <= yLineTotal; i++){
ctx.beginPath();
ctx.moveTo(i * grid, 0 - 0.5);
ctx.lineTo(i * grid, canvasHeight - 0.5);
ctx.strokeStyle = "#ddd";
ctx.stroke();
}
</script>
</body>
</html>
三、坐標系
1、確定原點位置
2、確定兩邊的邊距
3、確定箭頭的長度，繪製等腰三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector("canvas");
var ctx = myCanvas.getContext("2d");
var canvasHeight = ctx.canvas.height;
var canvasWidth = ctx.canvas.width;
// 1、確認邊距，和箭頭大小
// 邊距
var space = 20;
// 箭頭長
var arrowSize = 10;
// 2、確定坐標原點
var x0 = space ;
var y0 = canvasHeight - space;
// 3、畫出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.strokeStyle = "#000";
ctx.stroke();
// 4、畫出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.strokeStyle = "#000";
ctx.stroke();
</script>
</body>
</html>
四、繪製點
1、確定點的尺寸
2、以坐標中心繪製點
var Disc = function(x, y){
this.x = x;
this.y = y;
}
var dicsAside = 6;
var dics1 = new Disc(100, 100);
ctx.beginPath();
ctx.moveTo(dics1.x - dicsAside / 2, dics1.y - dicsAside / 2);
ctx.lineTo(dics1.x + dicsAside / 2, dics1.y - dicsAside / 2);
ctx.lineTo(dics1.x + dicsAside / 2, dics1.y + dicsAside / 2);
ctx.lineTo(dics1.x - dicsAside / 2, dics1.y + dicsAside / 2);
ctx.closePath();
ctx.fill();
五、繪製折線圖
註：網格，坐標系，點都能繪製出來了，下麵就可以開始繪製折線圖了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
border: 1px solid #333;
}
</style>
</head>
<body>
<canvas id="my_canvas" width="600" height="400"></canvas>
<script>
var LineChart = function(canvas){
// 獲取canvas
this.canvas = document.querySelector("canvas");
// 獲取上下文
this.ctx = this.canvas.getContext("2d");
// 獲取畫布的高
this.canvasHeight = this.ctx.canvas.height;
// 獲取畫布的寬
this.canvasWidth = this.ctx.canvas.width;
// 設置網格格子的大小
this.gridSize = 10;
// 設置坐標系邊距
this.space = 20;
// 設置箭頭的長
this.arrowSize = 10;
// 設置點的大小
this.dottedSize = 6;
}
LineChart.prototype.init = function(data){
this.drawGrid(this.ctx, this.canvasHeight, this.canvasWidth, this.gridSize);
this.drawCoord(this.ctx, this.space, this.arrowSize, this.canvasHeight, this.canvasWidth);
this.drawDotted(data, this.ctx, this.canvasHeight, this.space, this.dottedSize);
}
// 繪製網格
LineChart.prototype.drawGrid = function(ctx,canvasHeight, canvasWidth, gridSize){
var xLineTotal = Math.floor(canvasHeight / gridSize);
var yLineTotal = Math.floor(canvasWidth / gridSize);
// 繪製橫線
for(var i = 0; i < xLineTotal; i++){
ctx.beginPath();
ctx.moveTo(0, i * gridSize - .5);
ctx.lineTo(canvasWidth, i * gridSize - .5);
ctx.strokeStyle = "#ddd";
ctx.stroke();
}
// 繪製豎線
for(var i = 0; i < yLineTotal; i++){
ctx.beginPath();
ctx.moveTo(i * gridSize - .5, 0 );
ctx.lineTo(i * gridSize - .5, canvasHeight);
ctx.strokeStyle = "#ddd";
ctx.stroke();
}
}
//繪製坐標系
LineChart.prototype.drawCoord = function(ctx, space, arrowSize, canvasHeight, canvasWidth){
var x0 = space;
var y0 = canvasHeight - space;
// 繪製X軸
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(canvasWidth - space, y0);
ctx.strokeStyle = "#000";
ctx.stroke();
ctx.lineTo(canvasWidth - space - arrowSize, y0 + arrowSize / 2);
ctx.lineTo(canvasWidth - space - arrowSize, y0 - arrowSize / 2);
ctx.lineTo(canvasWidth - space, y0);
ctx.fill();
// 繪製Y軸
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(space, space);
ctx.strokeStyle = "#000";
ctx.stroke();
ctx.lineTo(space + arrowSize / 2, space + arrowSize);
ctx.lineTo(space - arrowSize / 2, space + arrowSize);
ctx.lineTo(space, space);
ctx.fill();
}
// 繪製點並連線
LineChart.prototype.drawDotted = function(data,ctx,canvasHeight,space,dottedSize){
var x0 = space;
var y0 = canvasHeight - space ;
var prevCanvasX = 0;
var prevCanvasY = 0;
data.forEach(function(item,i){
var canvasX = x0 + item.x;
var canvasY = y0 - item.y;
ctx.beginPath();
ctx.moveTo(canvasX - dottedSize / 2, canvasY - dottedSize / 2);
ctx.lineTo(canvasX + dottedSize / 2, canvasY - dottedSize / 2);
ctx.lineTo(canvasX + dottedSize / 2, canvasY + dottedSize / 2);
ctx.lineTo(canvasX - dottedSize / 2, canvasY + dottedSize / 2);
ctx.closePath();
ctx.fill();
ctx.beginPath();
if(i == 0){
ctx.moveTo(x0, y0);
ctx.lineTo(canvasX, canvasY);
ctx.stroke();
}else{
// ctx.moveTo(x0+data[i-1].x, y0 - data[i-1].y);
ctx.moveTo(prevCanvasX, prevCanvasY);
ctx.lineTo(canvasX, canvasY);
ctx.stroke();
}
prevCanvasX = canvasX;
prevCanvasY = canvasY;
});
}
var data = [
{
x : 100,
y : 100
},
{
x : 200,
y : 85
},
{
x : 300,
y : 125
},
{
x : 400,
y : 200,
},
{
x : 500,
y : 330
}
];
var lineChart = new LineChart("my_canvas");
lineChart.init(data);
</script>
</body>
</html>
