JavaScript 绘制饼图的示例

水深无声 2022-10-30 15:28 159阅读 0赞

实现代码  
JavaScript  
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  
107  
108  
109  
110  
111  
112  
113  
114  
115  
116  
117  
118  
119  
120  
121  
122  
123  
124  
125  
126  
127  
128  
129  
130  
131  
132  
133  
134  
135  
136  
137  
138  
139  
140  
141  
142  
143  
144  
145  
146  
147  
148  
149  
150  
151  
152  
153  
154  
155  
156  
157  
158  
159  
160  
161  
162  
163  
164  
165  
166  
167  
168  
169  
170  
171  
172  
173  
174  
175  
176  
177  
178  
179  
180  
181  
182  
183  
184  
185  
186  
187  
188  
189  
190  
191  
192  
193  
194  
195  
196  
197  
198  
199  
200  
201  
202  
203  
204  
205  
206  
207  
208  
209  
210  
211  
212  
213  
214  
var canvas = document.getElementById("mycanvas");  
var w = window.innerWidth;  
var h = window.innerHeight;  
canvas.height = 1000;  
canvas.width = 1400;  
var ctx = canvas.getContext('2d');  
  
var poppable = true;  
  
var slices = \[\];  
  
function shadeColor(color, percent) \{  
var f = parseInt(color.slice(1), 16),  
t = percent < 0 ? 0 : 255,  
p = percent < 0 ? percent \* -1 : percent,  
R = f >> 16,  
G = f >> 8 & 0x00FF,  
B = f & 0x0000FF;  
return "\#" + (0x1000000 + (Math.round((t - R) \* p) + R) \* 0x10000 + (Math.round((t - G) \* p) + G) \* 0x100 + (Math.round((t - B) \* p) + B)).toString(16).slice(1);  
\}  
  
function pieSlice(oX, oY, r, pos, len, col,data) \{  
this.data = data  
this.originX = oX;  
this.originY = oY;  
this.radius = r;  
this.startingRadian = pos;  
this.length = len;  
this.color = col;  
this.highlightedColor = shadeColor(this.color, .6);  
this.highlighted = false;  
this.popped = false;  
this.animationFrame = 0;  
  
function setColor(c) \{  
this.color = c;  
\}  
\}  
  
pieSlice.prototype.displayData = function()\{  
ctx.fillStyle= this.color;  
ctx.fillRect(this.originX - this.radius - 40, this.originY-this.radius-35, 25,25);  
ctx.fillStyle= "white";  
ctx.font = "15px Arial";  
ctx.fillText(this.data, this.originX - this.radius - 10, this.originY - this.radius - 18);  
\}  
  
pieSlice.prototype.render = function() \{  
if (!this.highlighted) \{  
ctx.fillStyle = this.color;  
ctx.strokeStyle = this.color;  
\} else \{  
if(!this.popped && poppable)\{  
this.displayData();  
\}  
// ctx.fillStyle = this.color;  
ctx.fillStyle = this.highlightedColor;  
ctx.strokeStyle = this.color;  
\}  
ctx.beginPath();  
var xOffset = Math.cos(this.length / 2 + this.startingRadian) \* this.animationFrame;  
var yOffset = Math.sin(this.length / 2 + this.startingRadian) \* this.animationFrame;  
ctx.moveTo(this.originX + xOffset, this.originY + yOffset);  
var x = this.originX + xOffset + this.radius \* Math.cos(this.startingRadian);  
var y = this.originY + yOffset + this.radius \* Math.sin(this.startingRadian);  
ctx.lineTo(x, y);  
ctx.arc(this.originX + xOffset, this.originY + yOffset, this.radius, this.startingRadian, this.startingRadian + this.length);  
if (this.popped) \{  
var fill = ctx.fillStyle;  
this.displayData();  
ctx.fillStyle = fill;  
if (this.animationFrame < 30) \{  
this.animationFrame += 2;  
\}  
\} else \{  
if (this.animationFrame > 0) \{  
this.animationFrame -= 2;  
\}  
\}  
ctx.closePath();  
//ctx.stroke();  
//if (this.highlighted) \{  
ctx.fill();  
// \}  
\}  
  
pieSlice.prototype.update = function() \{  
  
\}  
  
function pieChart(s) \{  
this.slices = s;  
\}  
pieChart.prototype.render = function() \{  
this.slices.forEach(function(p) \{  
p.render();  
\});  
\};  
  
pieChart.prototype.update = function() \{  
this.slices.forEach(function(p) \{  
p.update();  
\});  
  
\}  
//PIE ONE  
var pie = new pieSlice(700, 170, 125, 0, Math.PI / 4, "\#FFD1DC", 12);  
var slice2 = new pieSlice(700, 170, 125, Math.PI / 4, Math.PI / 4, "\#08E8DE");  
var slice3 = new pieSlice(700, 170, 125, Math.PI / 2, Math.PI / 4, "\#6699CC");  
var slice4 = new pieSlice(700, 170, 125, 3 \* Math.PI / 4, Math.PI, "\#ADD8E6");  
var slice5 = new pieSlice(700, 170, 125, 7 \* Math.PI / 4, Math.PI / 4, "\#B19CD9");  
var slices1 = \[pie, slice2, slice3, slice4, slice5\];  
  
var pink = new pieSlice(220, 170, 125, 0, Math.PI / 3, "\#FF4B4B");  
var orange = new pieSlice(220, 170, 125, Math.PI / 3, Math.PI / 3, "\#FF931B");  
var yellow = new pieSlice(220, 170, 125, 2 \* Math.PI / 3, Math.PI / 3, "\#FFE21B");  
var green = new pieSlice(220, 170, 125, 3 \* Math.PI / 3, Math.PI / 3, "\#90E64E");  
var blue = new pieSlice(220, 170, 125, 4 \* Math.PI / 3, Math.PI / 3, "\#6097D9");  
var purple = new pieSlice(220, 170, 125, 5 \* Math.PI / 3, Math.PI / 3, "\#8365DD");  
  
var redd = new pieSlice(1180, 170, 125, 0, 2 \* Math.PI / 3, "\#B3989B");  
var orangee = new pieSlice(1180, 170, 125, 2 \* Math.PI / 3, 1 \* Math.PI / 8, "\#C1AEE0");  
var bluee = new pieSlice(1180, 170, 125, 19 \* Math.PI / 24, 4 \* Math.PI / 24, "\#928CE9");  
var greenn = new pieSlice(1180, 170, 125, 23 \* Math.PI/24, 3\* Math.PI/8, "\#676675");  
var purplee = new pieSlice(1180, 170, 125, 4 \* Math.PI/3, 3\* Math.PI/8, "\#947D59");  
var ceci = new pieSlice(1180, 170, 125, 41 \* Math.PI/24, 7\*Math.PI/24, "\#D994E0");  
  
var slices3 = \[redd, orangee, bluee, greenn, purplee, ceci\];  
  
var slices2 = \[pink, orange, yellow, green, blue, purple\];  
var pie1 = new pieChart(slices1);  
var pie2 = new pieChart(slices2);  
var pie3 = new pieChart(slices3);  
var update = function() \{  
pie1.update();  
\}  
var render = function() \{  
ctx.clearRect(0, 0, canvas.width, canvas.height);  
pie1.render();  
pie2.render();  
pie3.render();  
\}  
  
var step = function() \{  
update();  
render();  
animate(step);  
\}  
  
var animate = window.requestAnimationFrame ||  
window.webkitRequestAnimationFrame ||  
window.mozRequestAnimationFrame ||  
function(callback) \{  
window.setTimeout(callback, 1000 / 60);  
\};  
  
slices.push.apply(slices, slices1);  
slices.push.apply(slices, slices2);  
slices.push.apply(slices, slices3);  
  
canvas.addEventListener("mousemove", function(e) \{  
var x = e.clientX;  
var y = e.clientY;  
slices.forEach(function(slice) \{  
ctx.beginPath();  
var xOffset = Math.cos(slice.length / 2 + slice.startingRadian) \* slice.animationFrame;  
var yOffset = Math.sin(slice.length / 2 + slice.startingRadian) \* slice.animationFrame;  
ctx.moveTo(slice.originX + xOffset, slice.originY + yOffset);  
var xx = slice.originX + xOffset + slice.radius \* Math.cos(slice.startingRadian);  
var yy = slice.originY + yOffset + slice.radius \* Math.sin(slice.startingRadian);  
ctx.lineTo(xx, yy);  
ctx.arc(slice.originX + xOffset, slice.originY + yOffset, slice.radius, slice.startingRadian, slice.startingRadian + slice.length);  
if (ctx.isPointInPath(x, y)) \{  
slice.highlighted = true;  
slice.displayData();  
\} else \{  
slice.highlighted = false;  
\}  
ctx.closePath();  
  
\});  
\});  
  
canvas.addEventListener("click", function(e) \{  
var x = e.clientX;  
var y = e.clientY;  
slices.forEach(function(slice) \{  
ctx.beginPath();  
var xOffset = Math.cos(slice.length / 2 + slice.startingRadian) \* slice.animationFrame;  
var yOffset = Math.sin(slice.length / 2 + slice.startingRadian) \* slice.animationFrame;  
ctx.moveTo(slice.originX + xOffset, slice.originY + yOffset);  
var xx = slice.originX + xOffset + slice.radius \* Math.cos(slice.startingRadian);  
var yy = slice.originY + yOffset + slice.radius \* Math.sin(slice.startingRadian);  
ctx.lineTo(xx, yy);  
ctx.arc(slice.originX + xOffset, slice.originY + yOffset, slice.radius, slice.startingRadian, slice.startingRadian + slice.length);  
if (ctx.isPointInPath(x, y)) \{  
if (slice.popped) \{  
slice.popped = false;  
poppable = true;  
\} else \{  
if(poppable)\{  
slice.popped = true;  
poppable = false;  
\}  
\}  
slice.highlighted = false;  
\}  
ctx.closePath();  
  
\});  
\});  
  
//start the loop  
animate(step);  
html  
1  
<canvas id="mycanvas"></canvas>  
以上就是JavaScript 绘制饼图的示例的详细内容