-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path折线图对象封装.html
106 lines (96 loc) · 3.79 KB
/
折线图对象封装.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas width="800" height="400"></canvas>
<script>
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext("2d");
function DrawLine(ctx, data, padding, arrow, canvas) {
//默认原始值
this.ctx = ctx;
this.arrow = arrow || {width: 20, height: 16};
this.padding = padding || {value: 20};
this.data = data;
this.canvas = canvas;
this.xVertex = {//x轴顶点坐标
x: this.canvas.width - this.padding.value,
y: this.canvas.height - this.padding.value
};
this.yVertex = {//y轴顶点坐标
x: this.padding.value,
y: this.padding.value
};
this.origin = {//原点坐标
x: this.padding.value,
y: this.canvas.height - this.padding.value
}
}
//写原型
DrawLine.prototype = {
constructor: DrawLine,
draw: function () {
//用来画出你想要的内容
this.drawAxis();
this.drawArrow();
this.drawL();
},
//画坐标轴
drawAxis: function () {
this.ctx.beginPath();
this.ctx.lineWidth = lineWidth || 2;
this.ctx.moveTo(this.xVertex.x, this.xVertex.y);
this.ctx.lineTo(this.origin.x, this.origin.y);
this.ctx.lineTo(this.yVertex.x, this.yVertex.y);
this.ctx.stroke();
},
drawArrow: function () {
//画x轴箭头
this.ctx.beginPath();
this.ctx.moveTo(this.xVertex.x, this.xVertex.y);
this.ctx.lineTo(this.xVertex.x - this.arrow.height, this.xVertex.y - this.arrow.width / 2);
this.ctx.lineTo(this.xVertex.x - this.arrow.height / 2, this.xVertex.y);
this.ctx.lineTo(this.xVertex.x - this.arrow.height, this.xVertex.y + this.arrow.width / 2);
this.ctx.closePath();
this.ctx.fill();
//画y轴箭头
this.ctx.beginPath();
this.ctx.moveTo(this.yVertex.x, this.yVertex.y);
this.ctx.lineTo(this.yVertex.x - this.arrow.width / 2, this.yVertex.y + this.arrow.height);
this.ctx.lineTo(this.yVertex.x, this.yVertex.y + this.arrow.height / 2);
this.ctx.lineTo(this.yVertex.x + this.arrow.width / 2, this.yVertex.y + this.arrow.height);
this.ctx.closePath();
this.ctx.fill();
},
drawL:function () {
//在坐标系上画点:
//x轴坐标: 原点坐标 + 点坐标
//y轴坐标: 原点坐标 - 点坐标
//x轴有效长度
var xWidth = this.oCanvas.width - this.padding.left - this.padding.right - this.arrow.height;
//y轴有效长度
var yWidth = this.oCanvas.height - this.padding.top - this.padding.bottom - this.arrow.height;
ctx.beginPath();
var xPer = xWidth/this.data.length;
var dataMax = Math.max.apply(null , this.data);
var yPer = yWidth/dataMax;
var _this = this;
this.ctx.moveTo(this.origin.x, this.origin.y);
this.data.forEach(function(val , i){
_this.ctx.fillRect(_this.origin.x + (i+1)*xPer - 2 , _this.origin.y - yPer*val - 2 , 4 , 4);
_this.ctx.lineTo(_this.origin.x + (i+1)*xPer , _this.origin.y - yPer*val);
_this.ctx.stroke();
});
}
};
var d = new DrawLine(ctx,[60,200,100,500,300,420] , canvas);
console.log(d);
d.draw();
d.data = [420,300,500,100,200,60];
d.draw();
</script>
</body>
</html>