김윤지 / Probability Death

Go to a project
Toggle navigation Toggle navigation pinning
김주희
2c194c4d 1 parent ebe0b28f

복사본 파일 삭제

Inline Side-by-side
Showing 1 changed file with 0 additions and 627 deletions
1 -<!-- <!DOCTYPE html>
2 -<html>
3 -
4 -<head>
5 - <!-- font -->
6 - <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet" />
7 - <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet" />
8 -
9 - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10 - <meta name="viewport" content="width=device-width, initial-scale=1" />
11 - <title>Highcharts Example</title>
12 -
13 - <style type="text/css">
14 - html {
15 - margin: 0;
16 - padding: 0;
17 -}
18 - body {
19 - margin: 0;
20 - padding: 0;
21 -
22 - /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */
23 - /* background-color:#65799B; */
24 - /* background-image: url("2.jpg");
25 - background-repeat: no-repeat;
26 - background-size: cover; */
27 - }
28 - #banner {
29 - position: absolute;
30 - top: 0;
31 - width: 100%;
32 - }
33 -
34 - </style>
35 -</head>
36 -
37 -<body>
38 - <script src="highcharts.js"></script>
39 - <script src="modules/exporting.js"></script>
40 - <script src="modules/export-data.js"></script>
41 -
42 - <div id="banner">
43 - <div id="container1" style="width:1260px; height: 400px; margin: 0 auto;"></div>
44 -
45 - <div style="width:1275px; margin:0 auto;">
46 - <div style="display: inline-block;">
47 - <div id="container2" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
48 - </div>
49 - <div style="display: inline-block;">
50 - <div id="container3" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
51 - </div>
52 -
53 - <div style="display: inline-block;">
54 - <div id="container4" style="width:400px; height: 300px; padding:0; margin-left:0px;"></div>
55 - </div>
56 - </div>
57 -
58 - <script src="/socket.io/socket.io.js"></script>
59 - <script type="text/javascript">
60 - let client_data = {
61 - birth: "<%=birth%>",
62 - name: "<%=name%>"
63 - }
64 - var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
65 - socket.emit("connection", client_data);
66 - socket.on("weatherInfo_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송
67 - console.log(info);
68 -
69 - var date = new Date().getTime();
70 -
71 - chart1.series[0].addPoint({
72 - x: date,
73 - y: info.death
74 - });
75 -
76 - chart2.series[0].addPoint({
77 - x: date,
78 - y: info.temperature
79 - });
80 -
81 - chart3.series[0].addPoint({
82 - x: date,
83 - y: info.wind
84 - });
85 -
86 - chart4.series[0].addPoint({
87 - x: date,
88 - y: info.rain
89 - });
90 -
91 - });
92 -
93 -
94 - var chart1 = Highcharts.chart("container1", {
95 - chart: {
96 - type: "spline",
97 - animation: Highcharts.svg, // don't animate in old IE
98 - marginRight: 10,
99 - // events: {
100 - // load: function () {
101 - // // set up the updating of the chart each second
102 - // var series = this.series[0];
103 - // setInterval(function () {
104 - // var x = new Date().getTime(), // 현재 시간
105 - // y = Math.random(); //여기에 새로 넣을 값
106 - // series.addPoint({x:x,y:y,color:"#FFE08C"}, true, true);
107 - // }, 1000); //1000=1초 -> 1분=60000
108 - // }
109 - // },
110 -
111 - backgroundColor: "rgba(255, 255, 255, 0.0)"
112 - },
113 -
114 - time: {
115 - useUTC: false
116 - },
117 -
118 - title: {
119 - text: "<%=name%>님의 실시간 사망 확률",
120 - style: {
121 - color: "#FFFFFF",
122 - fontWeight: "bold",
123 - fontFamily: 'Yeon Sung',
124 - fontSize:'32px'
125 - }
126 - },
127 - xAxis: {
128 - type: "datetime",
129 - tickPixelInterval: 150,
130 - labels: {
131 - style: {
132 - color: "white"
133 - }
134 - }
135 - },
136 - yAxis: {
137 - title: {
138 - text: "Value",
139 - style: {
140 - color: "white"
141 - }
142 - },
143 -
144 - plotLines: [
145 - {
146 - value: 0,
147 - width: 1,
148 - color: "#808080"
149 - }
150 - ],
151 - labels: {
152 - style: {
153 - color: "white"
154 - }
155 - }
156 -
157 - },
158 - tooltip: {
159 - headerFormat: "<b>{series.name}</b><br/>",
160 - pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
161 - },
162 - legend: {
163 - //enabled: false
164 - layout: "vertical",
165 - align: "left",
166 - verticalAlign: "top",
167 - x: 100,
168 - y: 50,
169 - floating: true,
170 - borderWidth: 1,
171 - backgroundColor:
172 - (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
173 - "#FFFFFF"
174 - },
175 - exporting: {
176 - enabled: false
177 - },
178 -
179 -plotOptions: {
180 - series: {
181 - marker: {
182 - radius: 6
183 - }
184 - }
185 - },
186 -
187 - series: [
188 - {
189 - name: "사망률",
190 - data: (function () {
191 - var deathArr = [],
192 - time = new Date().getTime();
193 - var length = <%=dataLen%>;
194 - var i = -9; //얘는 시간계산용
195 - var j = 0; //얘는 반복문용
196 - for (; j < 10 - length; j++) {
197 - deathArr.push({
198 - x: time + i * 60000,
199 - y: 0
200 - })
201 - i++;
202 - }
203 -
204 - <% probArr.forEach((probArr) => {%>
205 - var temp;
206 - temp = <%=probArr %>;
207 -
208 - // for(;j<10;j++)
209 - // {
210 - // deathArr.push({
211 - // x: time + i * 60000,
212 - // y: temp
213 - // })
214 - // i++;
215 - // }
216 -
217 - deathArr.push({
218 - x: time + i * 60000,
219 - y: temp
220 - })
221 - i++;
222 -
223 - <%}) %>
224 -
225 - return deathArr;
226 - })(),
227 -
228 - color: "#FFFFFF"
229 - }
230 - ]
231 -
232 - });
233 -
234 -
235 - var chart2 = Highcharts.chart("container2", {
236 - chart: {
237 - type: "spline",
238 - animation: Highcharts.svg, // don't animate in old IE
239 - marginRight: 10,
240 - // events: {
241 - // load: function () {
242 - // // set up the updating of the chart each second
243 - // var series = this.series[0];
244 - // setInterval(function () {
245 - // var x = new Date().getTime(), // 현재 시간
246 - // y = Math.random(); //
247 - // series.addPoint([x, y], true, true);
248 - // }, 3000); //1000=1초
249 - // }
250 - // },
251 -
252 - backgroundColor: "rgba(255, 255, 255, 0.0)"
253 - },
254 -
255 - time: {
256 - useUTC: false
257 - },
258 -
259 - title: {
260 - text: "기온",
261 - style: {
262 - color: "#FFFFFF",
263 - fontWeight: "bold",
264 - fontFamily: 'Yeon Sung',
265 - fontSize:'25px'
266 - }
267 -
268 - },
269 - xAxis: {
270 - type: "datetime",
271 - tickPixelInterval: 150,
272 - labels: {
273 - style: {
274 - color: "white"
275 - }
276 - }
277 - },
278 - yAxis: {
279 - title: {
280 - text: "Value",
281 - style: {
282 - color: "white"
283 - }
284 - },
285 - plotLines: [
286 - {
287 - value: 0,
288 - width: 1,
289 - color: "#808080"
290 - }
291 - ],
292 - labels: {
293 - style: {
294 - color: "white"
295 - }
296 - }
297 -
298 - },
299 - tooltip: {
300 - headerFormat: "<b>{series.name}</b><br/>",
301 - pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 기온 : {point.y:.2f}도"
302 - },
303 - legend: {
304 - //enabled: false
305 - layout: "vertical",
306 - align: "left",
307 - verticalAlign: "top",
308 - x: 100,
309 - y: 50,
310 - floating: true,
311 - borderWidth: 1,
312 - backgroundColor:
313 - (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
314 - "#FFFFFF"
315 - },
316 - exporting: {
317 - enabled: false
318 - },
319 - series: [
320 - {
321 - name: "기온",
322 - data: (function () {
323 - var tempArr = [],
324 - time = new Date().getTime();
325 - var length = <%=dataLen%>;
326 - var i = -9;
327 - var j = 0;
328 - for (j; j < 10 - length; j++) {
329 - tempArr.push({
330 - x: time + i * 60000,
331 - y: 0
332 - })
333 - i++;
334 - }
335 -
336 - <% ptArr.forEach((ptArr) => {%>
337 - var temp;
338 - temp = <%=ptArr %>;
339 -
340 - // for(j;j<10;j++)
341 - // {
342 - // tempArr.push({
343 - // x: time + i * 60000,
344 - // y: temp
345 - // })
346 - // i++;
347 - // }
348 -
349 - tempArr.push({
350 - x: time + i * 60000,
351 - y: temp
352 - })
353 - i++;
354 -
355 - <%}) %>
356 -
357 - return tempArr;
358 - })(),
359 -
360 - color: "#FFE08C"
361 - }
362 - ]
363 - });
364 -
365 - var chart3 = Highcharts.chart("container3", {
366 - chart: {
367 - type: "spline",
368 - animation: Highcharts.svg, // don't animate in old IE
369 - marginRight: 10,
370 - // events: {
371 - // load: function () {
372 - // // set up the updating of the chart each second
373 - // var series = this.series[0];
374 - // setInterval(function () {
375 - // var x = new Date().getTime(), // 현재 시간
376 - // y = Math.random(); //
377 - // series.addPoint([x, y], true, true);
378 - // }, 3000); //1000=1초
379 - // }
380 - // },
381 - backgroundColor: "rgba(255, 255, 255, 0.0)"
382 - },
383 -
384 - time: {
385 - useUTC: false
386 - },
387 -
388 - title: {
389 - text: "풍속",
390 - style: {
391 - color: "#FFFFFF",
392 - fontWeight: "bold",
393 - fontFamily: 'Yeon Sung',
394 - fontSize:'25px'
395 - }
396 - },
397 - xAxis: {
398 - type: "datetime",
399 - tickPixelInterval: 150,
400 - labels: {
401 - style: {
402 - color: "white"
403 - }
404 - }
405 - },
406 - yAxis: {
407 - title: {
408 - text: "Value",
409 - style: {
410 - color: "white"
411 - }
412 - },
413 - plotLines: [
414 - {
415 - value: 0,
416 - width: 1,
417 - color: "#808080"
418 - }
419 - ],
420 - labels: {
421 - style: {
422 - color: "white"
423 - }
424 - }
425 -
426 - },
427 - tooltip: {
428 - headerFormat: "<b>{series.name}</b><br/>",
429 - pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 풍속 : {point.y:.2f}m/s"
430 - },
431 - legend: {
432 - //enabled: false
433 - layout: "vertical",
434 - align: "left",
435 - verticalAlign: "top",
436 - x: 100,
437 - y: 50,
438 - floating: true,
439 - borderWidth: 1,
440 - backgroundColor:
441 - (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
442 - "#FFFFFF"
443 - },
444 - exporting: {
445 - enabled: false
446 - },
447 - series: [
448 - {
449 - name: "풍속",
450 - data: (function () {
451 - var windArr = [],
452 - time = new Date().getTime();
453 - var length = <%=dataLen%>;
454 - var i = -9;
455 - var j = 0;
456 - for (j; j < 10 - length; j++) {
457 - windArr.push({
458 - x: time + i * 60000,
459 - y: 0
460 - })
461 - i++;
462 - }
463 -
464 - <% wsArr.forEach((wsArr) => {%>
465 - var temp;
466 - temp = <%=wsArr %>;
467 -
468 - // for(j;j<10;j++)
469 - // {
470 - // windArr.push({
471 - // x: time + i * 60000,
472 - // y: temp
473 - // })
474 - // i++;
475 - // }
476 -
477 - windArr.push({
478 - x: time + i * 60000,
479 - y: temp
480 - })
481 - i++;
482 -
483 - <%}) %>
484 -
485 - return windArr;
486 - })(),
487 -
488 - color: "#FFE08C"
489 - }
490 - ] });
491 -
492 - var chart4 = Highcharts.chart("container4", {
493 - chart: {
494 - type: "spline",
495 - animation: Highcharts.svg, // don't animate in old IE
496 - marginRight: 10,
497 - // events: {
498 - // load: function () {
499 - // // set up the updating of the chart each second
500 - // var series = this.series[0];
501 - // setInterval(function () {
502 - // var x = new Date().getTime(), // 현재 시간
503 - // y = Math.random(); //
504 - // series.addPoint([x, y], true, true);
505 - // }, 3000); //1000=1초
506 - // }
507 - // },
508 - backgroundColor: "rgba(255, 255, 255, 0.0)"
509 - },
510 -
511 - time: {
512 - useUTC: false
513 - },
514 -
515 - title: {
516 - text: "강수량",
517 - style: {
518 - color: "#FFFFFF",
519 - fontWeight: "bold",
520 - fontFamily: 'Yeon Sung',
521 - fontSize:'25px'
522 - }
523 - },
524 - xAxis: {
525 - type: "datetime",
526 - tickPixelInterval: 150,
527 - labels: {
528 - style: {
529 - color: "white"
530 - }
531 - }
532 - },
533 - yAxis: {
534 - title: {
535 - text: "Value",
536 - style: {
537 - color: "white"
538 - }
539 - },
540 - plotLines: [
541 - {
542 - value: 0,
543 - width: 1,
544 - color: "#808080"
545 - }
546 - ],
547 - labels: {
548 - style: {
549 - color: "white"
550 - }
551 - }
552 -
553 - },
554 - tooltip: {
555 - headerFormat: "<b>{series.name}</b><br/>",
556 - pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 강수량 : {point.y:.2f}mm"
557 - },
558 - legend: {
559 - //enabled: false
560 - layout: "vertical",
561 - align: "left",
562 - verticalAlign: "top",
563 - x: 100,
564 - y: 50,
565 - floating: true,
566 - borderWidth: 1,
567 - backgroundColor:
568 - (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
569 - "#FFFFFF"
570 - },
571 - exporting: {
572 - enabled: false
573 - },
574 - series: [
575 - {
576 - name: "강수량",
577 - data: (function () {
578 - var rainArr = [],
579 - time = new Date().getTime();
580 - var length = <%=dataLen%>;
581 - var i = -9;
582 - var j = 0;
583 - for (j; j < 10 - length; j++) {
584 - rainArr.push({
585 - x: time + i * 60000,
586 - y: 0
587 - })
588 - i++;
589 - }
590 -
591 - <% rainArr.forEach((rainArr) => {%>
592 - var temp;
593 - temp = <%=rainArr %>;
594 -
595 - // for(j;j<10;j++)
596 - // {
597 - // rainArr.push({
598 - // x: time + i * 60000,
599 - // y: temp
600 - // })
601 - // i++;
602 - // }
603 -
604 - rainArr.push({
605 - x: time + i * 60000,
606 - y: temp
607 -
608 - })
609 - i++;
610 -
611 - <%}) %>
612 -
613 - return rainArr;
614 - })(),
615 - color: "#FFE08C"
616 -
617 - }
618 - ]
619 -
620 -
621 - });
622 - </script>
623 - </div>
624 -
625 -</body>
626 -
627 -</html> -->
...\ No newline at end of file ...\ No newline at end of file