Showing
9 changed files
with
117 additions
and
733 deletions
developImg/3_Image.PNG
0 → 100644
249 KB
graph/newbackground.png
0 → 100644
1.18 MB
public/images/newbackground.png
0 → 100644
1.18 MB
1 | var express = require('express'); | 1 | var express = require('express'); |
2 | var router = express.Router(); | 2 | var router = express.Router(); |
3 | -var db = require('../lib/db'); | 3 | +var db = require('../lib/db_total'); |
4 | 4 | ||
5 | /* GET home page. */ | 5 | /* GET home page. */ |
6 | 6 | ||
7 | router.post('/starting' , (req,res) => { | 7 | router.post('/starting' , (req,res) => { |
8 | - res.redirect(`/name/${req.body.name}/birth/${req.body.birth}`); | 8 | + res.redirect(`/name/${req.body.name}/birth/${req.body.birth}`); |
9 | }) | 9 | }) |
10 | -router.get('/name/:name/birth/:birth', (req,res) => { | 10 | +router.get('/name/:name/birth/:birth', (req, res) => { |
11 | - | ||
12 | - // 렌더링 변수 | ||
13 | - var time = new Array(); // 타임스탬프 | ||
14 | - var ptArr = new Array(); // 현재 온도 | ||
15 | - var wsArr = new Array(); // 풍속 | ||
16 | - var rainArr = new Array(); // 강우량 | ||
17 | - var probArr = new Array(); // 사망 확률 | ||
18 | - var dataLen = 0; // 데이터 개수 | ||
19 | - var empty = 0; // 초기값 유뮤, 0 : 자료 있음, 1 : 자료 없음 | ||
20 | - var sql = ""; // 쿼리 | ||
21 | - var count = 0; | ||
22 | - const name = req.params.name; | ||
23 | - const birth = req.params.birth; | ||
24 | 11 | ||
25 | - // 이전 10분간 데이터 찾기 | 12 | + // 렌더링 변수 |
26 | - sql = "SELECT * FROM weatherInfo WHERE time >= DATE_FORMAT(DATE_ADD(now(), INTERVAL -20 MINUTE), '%Y-%m-%d %H:%i:%s')"; | 13 | + var time = new Array(); // 타임스탬프 |
27 | - db.query(sql, function(err, rows, fields){ | 14 | + var ptArr = new Array(); // 현재 온도 |
28 | - if(err) | 15 | + var wsArr = new Array(); // 풍속 |
29 | - { | 16 | + var rainArr = new Array(); // 강우량 |
30 | - console.log(err); | 17 | + var probArr = new Array(); // 사망 확률 |
31 | - } | 18 | + var dataLen = 0; // 데이터 개수 |
32 | - else | 19 | + var empty = 0; // 초기값 유뮤, 0 : 자료 있음, 1 : 자료 없음 |
33 | - { | 20 | + var sql = ""; // 쿼리 |
34 | - if (rows.length == 0) | 21 | + var count = 0; |
35 | - { | 22 | + const name = req.params.name; |
36 | - empty = 1; | 23 | + const birth = req.params.birth; |
37 | - } | 24 | + //const address = req.params.address; |
38 | - else | 25 | + //////////////////////////////////////// |
39 | - { | 26 | + var deathArr = new Array(); |
40 | - for(var i = rows.length - 1; i >= 0; i--) | 27 | + var mhurtArr = new Array(); |
41 | - { | 28 | + var lhurtArr = new Array(); |
42 | - probArr.unshift(rows[i].prob); | 29 | + var occurArr = new Array(); |
43 | - time.unshift(rows[i].time); | 30 | + //////////////////////////////////////// |
44 | - ptArr.unshift(rows[i].temperature); | ||
45 | - wsArr.unshift(rows[i].wind); | ||
46 | - rainArr.unshift(rows[i].rain); | ||
47 | - count = count + 1; | ||
48 | 31 | ||
49 | - if (count == 10){ | 32 | + |
50 | - break; | 33 | + // 이전 10분간 데이터 찾기 |
51 | - } | 34 | + sql = "SELECT * FROM apisInfo WHERE time >= DATE_FORMAT(DATE_ADD(now(), INTERVAL -20 MINUTE), '%Y-%m-%d %H:%i:%s')"; |
35 | + db.query(sql, function (err, rows, fields) { | ||
36 | + if (err) { | ||
37 | + console.log(err); | ||
52 | } | 38 | } |
53 | - } | 39 | + else { |
40 | + if (rows.length == 0) { | ||
41 | + empty = 1; | ||
42 | + } | ||
43 | + else { | ||
44 | + for (var i = rows.length - 1; i >= 0; i--) { | ||
45 | + probArr.unshift(rows[i].prob); | ||
46 | + time.unshift(rows[i].time); | ||
47 | + ptArr.unshift(rows[i].temperature); | ||
48 | + wsArr.unshift(rows[i].wind); | ||
49 | + rainArr.unshift(rows[i].rain); | ||
50 | + //// | ||
51 | + deathArr.unshift(rows[i].tdeath); | ||
52 | + mhurtArr.unshift(rows[i].mhurt); | ||
53 | + lhurtArr.unshift(rows[i].lhurt); | ||
54 | + occurArr.unshift(rows[i].occurence); | ||
55 | + count = count + 1; | ||
56 | + | ||
57 | + if (count == 10) { | ||
58 | + break; | ||
59 | + } | ||
60 | + } | ||
61 | + } | ||
54 | 62 | ||
55 | - dataLen = probArr.length; | 63 | + dataLen = probArr.length; |
56 | - res.render('index', { | 64 | + res.render('index', { |
57 | - empty, | 65 | + empty, |
58 | - time, | 66 | + time, |
59 | - ptArr, | 67 | + ptArr, |
60 | - wsArr, | 68 | + wsArr, |
61 | - rainArr, | 69 | + rainArr, |
62 | - probArr, | 70 | + probArr, |
63 | - dataLen, | 71 | + dataLen, |
64 | - name, | 72 | + name, |
65 | - birth | 73 | + birth, |
66 | - }); | 74 | + deathArr, |
67 | - } | 75 | + mhurtArr, |
68 | - }); | 76 | + lhurtArr, |
69 | -} ) | 77 | + occurArr |
70 | -router.get('/', function(req, res, next) { | 78 | + }); |
71 | - res.render( 'main' ); | 79 | + } |
80 | + }); | ||
81 | +}) | ||
82 | +router.get('/', function (req, res, next) { | ||
83 | + res.render('main'); | ||
72 | }); | 84 | }); |
73 | 85 | ||
74 | module.exports = router; | 86 | module.exports = router; | ... | ... |
views/index - 복사본.ejs
deleted
100644 → 0
1 | -<!-- <!DOCTYPE html> | ||
2 | -<html> | ||
3 | - | ||
4 | -<head> | ||
5 | - <!-- font --> | ||
6 | - <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&subset=korean" rel="stylesheet" /> | ||
7 | - <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&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 |
1 | <!-- <!DOCTYPE html> | 1 | <!-- <!DOCTYPE html> |
2 | <html> | 2 | <html> |
3 | - | ||
4 | <head> | 3 | <head> |
5 | <!-- font --> | 4 | <!-- font --> |
6 | <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&subset=korean" rel="stylesheet" /> | 5 | <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&subset=korean" rel="stylesheet" /> |
... | @@ -39,7 +38,7 @@ | ... | @@ -39,7 +38,7 @@ |
39 | <script src="modules/exporting.js"></script> | 38 | <script src="modules/exporting.js"></script> |
40 | <script src="modules/export-data.js"></script> | 39 | <script src="modules/export-data.js"></script> |
41 | 40 | ||
42 | - <img src="images/background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%"> | 41 | + <img src="images/newbackground.png" alt="" style="z-index:-1; min-width: 100%; min-height: 100%"> |
43 | 42 | ||
44 | <div id="banner"> | 43 | <div id="banner"> |
45 | <div id="container1" style="width:1260px; height: 400px; margin: 0 auto;"></div> | 44 | <div id="container1" style="width:1260px; height: 400px; margin: 0 auto;"></div> | ... | ... |
... | @@ -24,48 +24,48 @@ | ... | @@ -24,48 +24,48 @@ |
24 | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> | 24 | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> |
25 | 25 | ||
26 | <style type="text/css"> | 26 | <style type="text/css"> |
27 | - html, | 27 | + html, |
28 | - { | 28 | + { |
29 | - margin: 0; | 29 | + margin: 0; |
30 | - padding: 0; | 30 | + padding: 0; |
31 | - } | 31 | + } |
32 | - | 32 | + |
33 | - body { | 33 | + body { |
34 | - margin: 0; | 34 | + margin: 0; |
35 | - padding: 0; | 35 | + padding: 0; |
36 | - | 36 | + |
37 | - /* background-image: url('background.jpg'); | 37 | + /* background-image: url('newbackground.png'); |
38 | - background-repeat: no-repeat; | 38 | + background-repeat: no-repeat; |
39 | - background-size: cover; */ | 39 | + background-size: cover; */ |
40 | - /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */ | 40 | + /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */ |
41 | - } | 41 | + } |
42 | - | 42 | + |
43 | - h1 { | 43 | + h1 { |
44 | - color: white; | 44 | + color: white; |
45 | - font-family: 'Nanum Brush Script', cursive; | 45 | + font-family: 'Nanum Brush Script', cursive; |
46 | - } | 46 | + } |
47 | - | 47 | + |
48 | - label { | 48 | + label { |
49 | - color: white; | 49 | + color: white; |
50 | - font-size: 20px; | 50 | + font-size: 20px; |
51 | - font-family: 'Yeon Sung', cursive; | 51 | + font-family: 'Yeon Sung', cursive; |
52 | - } | 52 | + } |
53 | - | 53 | + |
54 | - #banner { | 54 | + #banner { |
55 | - position: absolute; | 55 | + position: absolute; |
56 | - top: 0; | 56 | + top: 0; |
57 | - width: 100%; | 57 | + width: 100%; |
58 | - } | 58 | + } |
59 | - | 59 | + |
60 | - #footer { | 60 | + #footer { |
61 | - position: absolute; | 61 | + position: absolute; |
62 | - bottom: 0; | 62 | + bottom: 0; |
63 | - width: 100%; | 63 | + width: 100%; |
64 | - height: 50px; | 64 | + height: 50px; |
65 | - text-align: center; | 65 | + text-align: center; |
66 | - font-family: 'Yeon Sung', cursive; | 66 | + font-family: 'Yeon Sung', cursive; |
67 | - color: white; | 67 | + color: white; |
68 | - } | 68 | + } |
69 | </style> | 69 | </style> |
70 | 70 | ||
71 | </head> | 71 | </head> | ... | ... |
views/newbackground.png
0 → 100644
1.18 MB
... | @@ -21,7 +21,7 @@ | ... | @@ -21,7 +21,7 @@ |
21 | 21 | ||
22 | /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */ | 22 | /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */ |
23 | /* background-color:#65799B; */ | 23 | /* background-color:#65799B; */ |
24 | - /* background-image: url("2.jpg"); | 24 | + /* background-image: url("newbackground.png"); |
25 | background-repeat: no-repeat; | 25 | background-repeat: no-repeat; |
26 | background-size: cover; */ | 26 | background-size: cover; */ |
27 | } | 27 | } |
... | @@ -38,7 +38,7 @@ | ... | @@ -38,7 +38,7 @@ |
38 | <script src="highcharts.js"></script> | 38 | <script src="highcharts.js"></script> |
39 | <script src="modules/exporting.js"></script> | 39 | <script src="modules/exporting.js"></script> |
40 | <script src="modules/export-data.js"></script> | 40 | <script src="modules/export-data.js"></script> |
41 | - <img src="images/background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%"> | 41 | + <img src="images/newbackground.png" alt="" style="z-index:-1; min-width: 100%; min-height: 100%"> |
42 | 42 | ||
43 | <div id="banner"> | 43 | <div id="banner"> |
44 | <div id="container1" style="width:1260px; height: 400px; margin: 0 auto"></div> | 44 | <div id="container1" style="width:1260px; height: 400px; margin: 0 auto"></div> | ... | ... |
-
Please register or login to post a comment