Toggle navigation
Toggle navigation
This project
Loading...
Sign in
조민지
/
2018_2_project
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
조민지
2018-12-14 02:46:41 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
036e2a64e2ff0dc7cf6c86efdef5d53c95cee2b6
036e2a64
1 parent
7882825a
ejs errrorrrrrr
Hide whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
1592 additions
and
282 deletions
app.js
graph/main.html
public/1.jpg → public/images/1.jpg
public/2.jpg → public/images/2.jpg
public/background.jpg → public/images/background.jpg
views/2.jpg
views/index - 복사본.ejs
views/index.ejs
views/main.ejs
views/re.ejs
app.js
View file @
036e2a6
...
...
@@ -18,8 +18,8 @@ app.use(logger('dev'));
app
.
use
(
express
.
json
());
app
.
use
(
express
.
urlencoded
({
extended
:
false
}));
app
.
use
(
cookieParser
());
app
.
use
(
express
.
static
(
path
.
join
(
__dirname
,
'public'
)));
app
.
use
(
express
.
static
(
path
.
join
(
__dirname
,
'code'
)));
app
.
use
(
'/'
,
express
.
static
(
path
.
join
(
__dirname
,
'public'
)));
app
.
use
(
'/'
,
express
.
static
(
path
.
join
(
__dirname
,
'code'
)));
app
.
use
(
'/name/:name/birth'
,
express
.
static
(
path
.
join
(
__dirname
,
'public'
)));
app
.
use
(
'/name/:name/birth'
,
express
.
static
(
path
.
join
(
__dirname
,
'code'
)));
...
...
graph/main.html
View file @
036e2a6
...
...
@@ -25,9 +25,9 @@
<style
type=
"text/css"
>
body
{
background-image
:
url('background.jpg')
;
/*
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size
:
cover
;
background-size: cover;
*/
/* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */
}
...
...
@@ -41,6 +41,11 @@
font-size
:
20px
;
font-family
:
'Yeon Sung'
,
cursive
;
}
#banner
{
position
:
absolute
;
top
:
0
;
width
:
100%
;
}
#footer
{
position
:
absolute
;
bottom
:
0
;
...
...
@@ -55,22 +60,26 @@
</head>
<body>
<div
style=
"width:100%; text-align: center; margin-top:170px;"
>
<h1
style=
"font-size:90px;"
>
당신이 지금 죽을 확률은?
</h1>
</div>
<br><br><br>
<div
style=
"width:100%; text-align: center;"
>
<form
action=
"/starting"
method=
"post"
>
<div
class=
"form-inline"
>
<label>
이름
</label>
<input
type=
"text"
name=
"name"
class=
"form-control"
placeholder=
"김철수"
style=
"width:200px;"
>
&
nbsp
&
nbsp
&
nbsp
&
nbsp
<label>
생년월일
</label>
<input
type=
"text"
name=
"birth"
class=
"form-control"
placeholder=
"971009"
style=
"width:200px;"
>
<img
src=
"./background.jpg"
alt=
""
style=
"z-index:-1; min-width: 100%; min-height: 100%"
>
<div
id=
"banner"
>
<div
style=
"width:100%; text-align: center; padding-top:170px;"
>
<h1
style=
"font-size:90px;"
>
당신이 지금 죽을 확률은?
</h1>
</div>
<br><br><br>
<input
type=
"submit"
value=
"시작하기"
class=
"btn btn-default"
style=
"font-family: 'Yeon Sung', cursive; width:100px;font-weight: bold; font-size: 18px; background-color: white;"
>
</div>
</form>
<div
style=
"width:100%; text-align: center;"
>
<form
action=
"/starting"
method=
"post"
>
<div
class=
"form-inline"
>
<label>
이름
</label>
<input
type=
"text"
name=
"name"
class=
"form-control"
placeholder=
"김철수"
style=
"width:200px;"
>
&
nbsp
&
nbsp
&
nbsp
&
nbsp
<label>
생년월일
</label>
<input
type=
"text"
name=
"birth"
class=
"form-control"
placeholder=
"971009"
style=
"width:200px;"
>
<br><br><br>
<input
type=
"submit"
value=
"시작하기"
class=
"btn btn-default"
style=
"font-family: 'Yeon Sung', cursive; width:100px;font-weight: bold; font-size: 18px; background-color: white;"
>
</div>
</form>
</div>
</div>
<div
id=
"footer"
>
오픈소스SW개발 조민지 강환석 배희수
</div>
...
...
public/1.jpg
→
public/
images/
1.jpg
View file @
036e2a6
205 KB
public/2.jpg
→
public/
images/
2.jpg
View file @
036e2a6
204 KB
public/background.jpg
→
public/
images/
background.jpg
View file @
036e2a6
37.7 KB
views/2.jpg
0 → 100644
View file @
036e2a6
204 KB
views/index - 복사본.ejs
0 → 100644
View file @
036e2a6
<!-- <!DOCTYPE html>
<html>
<head>
<!-- font -->
<link
href=
"https://fonts.googleapis.com/css?family=Nanum+Brush+Script&subset=korean"
rel=
"stylesheet"
/>
<link
href=
"https://fonts.googleapis.com/css?family=Yeon+Sung&subset=korean"
rel=
"stylesheet"
/>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
/>
<title>
Highcharts Example
</title>
<style
type=
"text/css"
>
html
{
margin
:
0
;
padding
:
0
;
}
body
{
margin
:
0
;
padding
:
0
;
/* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */
/* background-color:#65799B; */
/* background-image: url("2.jpg");
background-repeat: no-repeat;
background-size: cover; */
}
#banner
{
position
:
absolute
;
top
:
0
;
width
:
100%
;
}
</style>
</head>
<body>
<script
src=
"highcharts.js"
></script>
<script
src=
"modules/exporting.js"
></script>
<script
src=
"modules/export-data.js"
></script>
<div
id=
"banner"
>
<div
id=
"container1"
style=
"width:1260px; height: 400px; margin: 0 auto;"
></div>
<div
style=
"width:1275px; margin:0 auto;"
>
<div
style=
"display: inline-block;"
>
<div
id=
"container2"
style=
"width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
></div>
</div>
<div
style=
"display: inline-block;"
>
<div
id=
"container3"
style=
"width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
></div>
</div>
<div
style=
"display: inline-block;"
>
<div
id=
"container4"
style=
"width:400px; height: 300px; padding:0; margin-left:0px;"
></div>
</div>
</div>
<script
src=
"/socket.io/socket.io.js"
></script>
<script
type=
"text/javascript"
>
let
client_data
=
{
birth
:
"<%=birth%>"
,
name
:
"<%=name%>"
}
var
socket
=
io
.
connect
(
'/'
,
{
transports
:
[
'websocket'
],
upgrade
:
false
});
socket
.
emit
(
"connection"
,
client_data
);
socket
.
on
(
"weatherInfo_minutely_send_to_client"
,
(
info
)
=>
{
//서버에서 client에게 메세지 전송
console
.
log
(
info
);
var
date
=
new
Date
().
getTime
();
chart1
.
series
[
0
].
addPoint
({
x
:
date
,
y
:
info
.
death
});
chart2
.
series
[
0
].
addPoint
({
x
:
date
,
y
:
info
.
temperature
});
chart3
.
series
[
0
].
addPoint
({
x
:
date
,
y
:
info
.
wind
});
chart4
.
series
[
0
].
addPoint
({
x
:
date
,
y
:
info
.
rain
});
});
var
chart1
=
Highcharts
.
chart
(
"container1"
,
{
chart
:
{
type
:
"spline"
,
animation
:
Highcharts
.
svg
,
// don't animate in old IE
marginRight
:
10
,
// events: {
// load: function () {
// // set up the updating of the chart each second
// var series = this.series[0];
// setInterval(function () {
// var x = new Date().getTime(), // 현재 시간
// y = Math.random(); //여기에 새로 넣을 값
// series.addPoint({x:x,y:y,color:"#FFE08C"}, true, true);
// }, 1000); //1000=1초 -> 1분=60000
// }
// },
backgroundColor
:
"rgba(255, 255, 255, 0.0)"
},
time
:
{
useUTC
:
false
},
title
:
{
text
:
"<%=name%>님의 실시간 사망 확률"
,
style
:
{
color
:
"#FFFFFF"
,
fontWeight
:
"bold"
,
fontFamily
:
'Yeon Sung'
,
fontSize
:
'32px'
}
},
xAxis
:
{
type
:
"datetime"
,
tickPixelInterval
:
150
,
labels
:
{
style
:
{
color
:
"white"
}
}
},
yAxis
:
{
title
:
{
text
:
"Value"
,
style
:
{
color
:
"white"
}
},
plotLines
:
[
{
value
:
0
,
width
:
1
,
color
:
"#808080"
}
],
labels
:
{
style
:
{
color
:
"white"
}
}
},
tooltip
:
{
headerFormat
:
"<b>{series.name}</b><br/>"
,
pointFormat
:
"{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
},
legend
:
{
//enabled: false
layout
:
"vertical"
,
align
:
"left"
,
verticalAlign
:
"top"
,
x
:
100
,
y
:
50
,
floating
:
true
,
borderWidth
:
1
,
backgroundColor
:
(
Highcharts
.
theme
&&
Highcharts
.
theme
.
legendBackgroundColor
)
||
"#FFFFFF"
},
exporting
:
{
enabled
:
false
},
plotOptions
:
{
series
:
{
marker
:
{
radius
:
6
}
}
},
series
:
[
{
name
:
"사망률"
,
data
:
(
function
()
{
var
deathArr
=
[],
time
=
new
Date
().
getTime
();
var
length
=
<%=
dataLen
%>
;
var
i
=
-
9
;
//얘는 시간계산용
var
j
=
0
;
//얘는 반복문용
for
(;
j
<
10
-
length
;
j
++
)
{
deathArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
0
})
i
++
;
}
<%
probArr
.
forEach
((
probArr
)
=>
{
%>
var
temp
;
temp
=
<%=
probArr
%>
;
// for(;j<10;j++)
// {
// deathArr.push({
// x: time + i * 60000,
// y: temp
// })
// i++;
// }
deathArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
temp
})
i
++
;
<%
})
%>
return
deathArr
;
})(),
color
:
"#FFFFFF"
}
]
});
var
chart2
=
Highcharts
.
chart
(
"container2"
,
{
chart
:
{
type
:
"spline"
,
animation
:
Highcharts
.
svg
,
// don't animate in old IE
marginRight
:
10
,
// events: {
// load: function () {
// // set up the updating of the chart each second
// var series = this.series[0];
// setInterval(function () {
// var x = new Date().getTime(), // 현재 시간
// y = Math.random(); //
// series.addPoint([x, y], true, true);
// }, 3000); //1000=1초
// }
// },
backgroundColor
:
"rgba(255, 255, 255, 0.0)"
},
time
:
{
useUTC
:
false
},
title
:
{
text
:
"기온"
,
style
:
{
color
:
"#FFFFFF"
,
fontWeight
:
"bold"
,
fontFamily
:
'Yeon Sung'
,
fontSize
:
'25px'
}
},
xAxis
:
{
type
:
"datetime"
,
tickPixelInterval
:
150
,
labels
:
{
style
:
{
color
:
"white"
}
}
},
yAxis
:
{
title
:
{
text
:
"Value"
,
style
:
{
color
:
"white"
}
},
plotLines
:
[
{
value
:
0
,
width
:
1
,
color
:
"#808080"
}
],
labels
:
{
style
:
{
color
:
"white"
}
}
},
tooltip
:
{
headerFormat
:
"<b>{series.name}</b><br/>"
,
pointFormat
:
"{point.x:%Y년%m월%d일 %H시%M분}<br/>의 기온 : {point.y:.2f}도"
},
legend
:
{
//enabled: false
layout
:
"vertical"
,
align
:
"left"
,
verticalAlign
:
"top"
,
x
:
100
,
y
:
50
,
floating
:
true
,
borderWidth
:
1
,
backgroundColor
:
(
Highcharts
.
theme
&&
Highcharts
.
theme
.
legendBackgroundColor
)
||
"#FFFFFF"
},
exporting
:
{
enabled
:
false
},
series
:
[
{
name
:
"기온"
,
data
:
(
function
()
{
var
tempArr
=
[],
time
=
new
Date
().
getTime
();
var
length
=
<%=
dataLen
%>
;
var
i
=
-
9
;
var
j
=
0
;
for
(
j
;
j
<
10
-
length
;
j
++
)
{
tempArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
0
})
i
++
;
}
<%
ptArr
.
forEach
((
ptArr
)
=>
{
%>
var
temp
;
temp
=
<%=
ptArr
%>
;
// for(j;j<10;j++)
// {
// tempArr.push({
// x: time + i * 60000,
// y: temp
// })
// i++;
// }
tempArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
temp
})
i
++
;
<%
})
%>
return
tempArr
;
})(),
color
:
"#FFE08C"
}
]
});
var
chart3
=
Highcharts
.
chart
(
"container3"
,
{
chart
:
{
type
:
"spline"
,
animation
:
Highcharts
.
svg
,
// don't animate in old IE
marginRight
:
10
,
// events: {
// load: function () {
// // set up the updating of the chart each second
// var series = this.series[0];
// setInterval(function () {
// var x = new Date().getTime(), // 현재 시간
// y = Math.random(); //
// series.addPoint([x, y], true, true);
// }, 3000); //1000=1초
// }
// },
backgroundColor
:
"rgba(255, 255, 255, 0.0)"
},
time
:
{
useUTC
:
false
},
title
:
{
text
:
"풍속"
,
style
:
{
color
:
"#FFFFFF"
,
fontWeight
:
"bold"
,
fontFamily
:
'Yeon Sung'
,
fontSize
:
'25px'
}
},
xAxis
:
{
type
:
"datetime"
,
tickPixelInterval
:
150
,
labels
:
{
style
:
{
color
:
"white"
}
}
},
yAxis
:
{
title
:
{
text
:
"Value"
,
style
:
{
color
:
"white"
}
},
plotLines
:
[
{
value
:
0
,
width
:
1
,
color
:
"#808080"
}
],
labels
:
{
style
:
{
color
:
"white"
}
}
},
tooltip
:
{
headerFormat
:
"<b>{series.name}</b><br/>"
,
pointFormat
:
"{point.x:%Y년%m월%d일 %H시%M분}<br/>의 풍속 : {point.y:.2f}m/s"
},
legend
:
{
//enabled: false
layout
:
"vertical"
,
align
:
"left"
,
verticalAlign
:
"top"
,
x
:
100
,
y
:
50
,
floating
:
true
,
borderWidth
:
1
,
backgroundColor
:
(
Highcharts
.
theme
&&
Highcharts
.
theme
.
legendBackgroundColor
)
||
"#FFFFFF"
},
exporting
:
{
enabled
:
false
},
series
:
[
{
name
:
"풍속"
,
data
:
(
function
()
{
var
windArr
=
[],
time
=
new
Date
().
getTime
();
var
length
=
<%=
dataLen
%>
;
var
i
=
-
9
;
var
j
=
0
;
for
(
j
;
j
<
10
-
length
;
j
++
)
{
windArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
0
})
i
++
;
}
<%
wsArr
.
forEach
((
wsArr
)
=>
{
%>
var
temp
;
temp
=
<%=
wsArr
%>
;
// for(j;j<10;j++)
// {
// windArr.push({
// x: time + i * 60000,
// y: temp
// })
// i++;
// }
windArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
temp
})
i
++
;
<%
})
%>
return
windArr
;
})(),
color
:
"#FFE08C"
}
]
});
var
chart4
=
Highcharts
.
chart
(
"container4"
,
{
chart
:
{
type
:
"spline"
,
animation
:
Highcharts
.
svg
,
// don't animate in old IE
marginRight
:
10
,
// events: {
// load: function () {
// // set up the updating of the chart each second
// var series = this.series[0];
// setInterval(function () {
// var x = new Date().getTime(), // 현재 시간
// y = Math.random(); //
// series.addPoint([x, y], true, true);
// }, 3000); //1000=1초
// }
// },
backgroundColor
:
"rgba(255, 255, 255, 0.0)"
},
time
:
{
useUTC
:
false
},
title
:
{
text
:
"강수량"
,
style
:
{
color
:
"#FFFFFF"
,
fontWeight
:
"bold"
,
fontFamily
:
'Yeon Sung'
,
fontSize
:
'25px'
}
},
xAxis
:
{
type
:
"datetime"
,
tickPixelInterval
:
150
,
labels
:
{
style
:
{
color
:
"white"
}
}
},
yAxis
:
{
title
:
{
text
:
"Value"
,
style
:
{
color
:
"white"
}
},
plotLines
:
[
{
value
:
0
,
width
:
1
,
color
:
"#808080"
}
],
labels
:
{
style
:
{
color
:
"white"
}
}
},
tooltip
:
{
headerFormat
:
"<b>{series.name}</b><br/>"
,
pointFormat
:
"{point.x:%Y년%m월%d일 %H시%M분}<br/>의 강수량 : {point.y:.2f}mm"
},
legend
:
{
//enabled: false
layout
:
"vertical"
,
align
:
"left"
,
verticalAlign
:
"top"
,
x
:
100
,
y
:
50
,
floating
:
true
,
borderWidth
:
1
,
backgroundColor
:
(
Highcharts
.
theme
&&
Highcharts
.
theme
.
legendBackgroundColor
)
||
"#FFFFFF"
},
exporting
:
{
enabled
:
false
},
series
:
[
{
name
:
"강수량"
,
data
:
(
function
()
{
var
rainArr
=
[],
time
=
new
Date
().
getTime
();
var
length
=
<%=
dataLen
%>
;
var
i
=
-
9
;
var
j
=
0
;
for
(
j
;
j
<
10
-
length
;
j
++
)
{
rainArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
0
})
i
++
;
}
<%
rainArr
.
forEach
((
rainArr
)
=>
{
%>
var
temp
;
temp
=
<%=
rainArr
%>
;
// for(j;j<10;j++)
// {
// rainArr.push({
// x: time + i * 60000,
// y: temp
// })
// i++;
// }
rainArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
temp
})
i
++
;
<%
})
%>
return
rainArr
;
})(),
color
:
"#FFE08C"
}
]
});
</script>
</div>
</body>
</html>
-->
\ No newline at end of file
views/index.ejs
View file @
036e2a6
<!DOCTYPE html>
<!
-- <!
DOCTYPE html>
<html>
<head>
...
...
@@ -11,13 +11,26 @@
<title>
Highcharts Example
</title>
<style
type=
"text/css"
>
html
{
margin
:
0
;
padding
:
0
;
}
body
{
margin
:
0
;
padding
:
0
;
/* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */
/* background-color:#65799B; */
background-image
:
url("2.jpg")
;
/*
background-image: url("2.jpg");
background-repeat: no-repeat;
background-size
:
cover
;
background-size: cover; */
}
#banner
{
position
:
absolute
;
top
:
0
;
width
:
100%
;
}
</style>
</head>
...
...
@@ -26,7 +39,10 @@
<script
src=
"modules/exporting.js"
></script>
<script
src=
"modules/export-data.js"
></script>
<div
id=
"container1"
style=
"width:1260px; height: 400px; margin: 0 auto"
></div>
<img
src=
"images/background.jpg"
alt=
""
style=
"z-index:-1; min-width: 100%; min-height: 100%"
>
<div
id=
"banner"
>
<div
id=
"container1"
style=
"width:1260px; height: 400px; margin: 0 auto;"
></div>
<div
style=
"width:1275px; margin:0 auto;"
>
<div
style=
"display: inline-block;"
>
...
...
@@ -41,49 +57,14 @@
</div>
</div>
<script
src=
"/socket.io/socket.io.js"
></script>
<script>
let
client_data
=
{
birth
:
"<%=birth%>"
,
name
:
"<%=name%>"
}
var
socket
=
io
.
connect
(
'/'
,
{
transports
:
[
'websocket'
],
upgrade
:
false
});
socket
.
emit
(
"connection"
,
client_data
);
socket
.
on
(
"weatherInfo_minutely_send_to_client"
,
(
info
)
=>
{
//서버에서 client에게 메세지 전송
console
.
log
(
info
);
var
date
=
new
Date
().
getTime
();
chart1
.
series
[
0
].
addPoint
({
x
:
date
,
y
:
info
.
death
,
color
:
"#FFE08C"
})
chart2
.
series
[
0
].
addPoint
({
x
:
date
,
y
:
info
.
temperature
,
color
:
"#FFE08C"
})
chart3
.
series
[
0
].
addPoint
({
x
:
date
,
y
:
info
.
wind
,
color
:
"#FFE08C"
})
chart4
.
series
[
0
].
addPoint
({
x
:
date
,
y
:
info
.
rain
,
color
:
"#FFE08C"
})
});
</script>
<script
type=
"text/javascript"
>
//사망률
let
client_data
=
{
birth
:
"<%=birth%>"
,
name
:
"<%=name%>"
}
var
chart1
=
Highcharts
.
chart
(
"container1"
,
{
chart
:
{
type
:
"spline"
,
...
...
@@ -95,11 +76,13 @@
// var series = this.series[0];
// setInterval(function () {
// var x = new Date().getTime(), // 현재 시간
// y =
0
; //여기에 새로 넣을 값
// series.addPoint(
[x, y]
, true, true);
// },
60
000); //1000=1초 -> 1분=60000
// y =
Math.random()
; //여기에 새로 넣을 값
// series.addPoint(
{x:x,y:y,color:"#FFE08C"}
, true, true);
// },
1
000); //1000=1초 -> 1분=60000
// }
// }
// },
backgroundColor
:
"rgba(255, 255, 255, 0.0)"
},
time
:
{
...
...
@@ -107,14 +90,13 @@
},
title
:
{
text
:
"<%=name%>님의 실시간 사망률"
,
text
:
"<%=name%>님의 실시간 사망
확
률"
,
style
:
{
color
:
"#FFFFFF"
,
fontWeight
:
"bold"
,
fontFamily
:
'Yeon Sung'
,
fontSize
:
'32px'
fontSize
:
'32px'
}
},
xAxis
:
{
type
:
"datetime"
,
...
...
@@ -124,7 +106,6 @@
color
:
"white"
}
}
},
yAxis
:
{
title
:
{
...
...
@@ -133,6 +114,7 @@
color
:
"white"
}
},
plotLines
:
[
{
value
:
0
,
...
...
@@ -141,10 +123,11 @@
}
],
labels
:
{
style
:
{
color
:
"white"
style
:
{
color
:
"white"
}
}
}
},
tooltip
:
{
headerFormat
:
"<b>{series.name}</b><br/>"
,
...
...
@@ -167,61 +150,62 @@
enabled
:
false
},
plotOptions
:
{
plotOptions
:
{
series
:
{
marker
:
{
radius
:
6
}
marker
:
{
radius
:
6
}
}
},
},
series
:
[
{
name
:
"사망률"
,
data
:
(
function
()
{
var
deathArr
=
[],
time
=
new
Date
().
getTime
();
var
length
=
<%=
dataLen
%>
;
var
i
=
-
9
;
//얘는 시간계산용
var
j
=
0
;
//얘는 반복문용
for
(;
j
<
10
-
length
;
j
++
)
{
deathArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
0
})
i
++
;
}
series
:
[
{
name
:
"사망률"
,
data
:
(
function
()
{
var
deathArr
=
[],
time
=
new
Date
().
getTime
();
var
length
=
<%=
dataLen
%>
;
var
i
=
-
9
;
//얘는 시간계산용
var
j
=
0
;
//얘는 반복문용
for
(;
j
<
10
-
length
;
j
++
)
{
deathArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
0
})
i
++
;
}
<%
probArr
.
forEach
((
probArr
)
=>
{
%>
var
temp
;
temp
=
<%=
probArr
%>
;
// for(;j<10;j++)
// {
// deathArr.push({
// x: time + i * 60000,
// y: temp
// })
// i++;
// }
deathArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
temp
})
i
++
;
temp
=
<%=
probArr
%>
;
// for(;j<10;j++)
// {
// deathArr.push({
// x: time + i * 60000,
// y: temp
// })
// i++;
// }
deathArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
temp
})
i
++
;
<%
})
%>
return
deathArr
;
})(),
})(),
color
:
"#FFFFFF"
}
]
color
:
"#FFFFFF"
}
]
});
//기온
var
chart2
=
Highcharts
.
chart
(
"container2"
,
{
chart
:
{
type
:
"spline"
,
...
...
@@ -233,13 +217,13 @@
// var series = this.series[0];
// setInterval(function () {
// var x = new Date().getTime(), // 현재 시간
// y =
0
; //
// y =
Math.random()
; //
// series.addPoint([x, y], true, true);
// },
60
000); //1000=1초
// },
3
000); //1000=1초
// }
// }
backgroundColor
:
"rgba(255, 255, 255, 0.0)"
// },
backgroundColor
:
"rgba(255, 255, 255, 0.0)"
},
time
:
{
...
...
@@ -252,7 +236,7 @@
color
:
"#FFFFFF"
,
fontWeight
:
"bold"
,
fontFamily
:
'Yeon Sung'
,
fontSize
:
'25px'
fontSize
:
'25px'
}
},
...
...
@@ -280,14 +264,15 @@
}
],
labels
:
{
style
:
{
color
:
"white"
style
:
{
color
:
"white"
}
}
}
},
tooltip
:
{
headerFormat
:
"<b>{series.name}</b><br/>"
,
pointFormat
:
"{point.x:%Y년%m월%d일 %H시%M분}<br/>의
사망률 : {point.y:.2f}%
"
pointFormat
:
"{point.x:%Y년%m월%d일 %H시%M분}<br/>의
기온 : {point.y:.2f}도
"
},
legend
:
{
//enabled: false
...
...
@@ -306,51 +291,51 @@
enabled
:
false
},
series
:
[
{
name
:
"기온"
,
data
:
(
function
()
{
var
tempArr
=
[],
time
=
new
Date
().
getTime
();
var
length
=
<%=
dataLen
%>
;
var
i
=
-
9
;
var
j
=
0
;
for
(
j
;
j
<
10
-
length
;
j
++
)
{
tempArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
0
})
i
++
;
}
{
name
:
"기온"
,
data
:
(
function
()
{
var
tempArr
=
[],
time
=
new
Date
().
getTime
();
var
length
=
<%=
dataLen
%>
;
var
i
=
-
9
;
var
j
=
0
;
for
(
j
;
j
<
10
-
length
;
j
++
)
{
tempArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
0
})
i
++
;
}
<%
ptArr
.
forEach
((
ptArr
)
=>
{
%>
var
temp
;
temp
=
<%=
ptArr
%>
;
// for(j;j<10;j++)
// {
// tempArr.push({
// x: time + i * 60000,
// y: temp
// })
// i++;
// }
tempArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
temp
})
i
++
;
temp
=
<%=
ptArr
%>
;
// for(j;j<10;j++)
// {
// tempArr.push({
// x: time + i * 60000,
// y: temp
// })
// i++;
// }
tempArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
temp
})
i
++
;
<%
})
%>
return
tempArr
;
})(),
})(),
color
:
"#FFE08C"
}
]
color
:
"#FFE08C"
}
]
});
//풍속
var
chart3
=
Highcharts
.
chart
(
"container3"
,
{
chart
:
{
type
:
"spline"
,
...
...
@@ -362,13 +347,12 @@
// var series = this.series[0];
// setInterval(function () {
// var x = new Date().getTime(), // 현재 시간
// y =
0
; //
// y =
Math.random()
; //
// series.addPoint([x, y], true, true);
// },
60
000); //1000=1초
// },
3
000); //1000=1초
// }
// }
// }
,
backgroundColor
:
"rgba(255, 255, 255, 0.0)"
},
time
:
{
...
...
@@ -381,9 +365,8 @@
color
:
"#FFFFFF"
,
fontWeight
:
"bold"
,
fontFamily
:
'Yeon Sung'
,
fontSize
:
'25px'
fontSize
:
'25px'
}
},
xAxis
:
{
type
:
"datetime"
,
...
...
@@ -393,7 +376,6 @@
color
:
"white"
}
}
},
yAxis
:
{
title
:
{
...
...
@@ -401,7 +383,6 @@
style
:
{
color
:
"white"
}
},
plotLines
:
[
{
...
...
@@ -411,15 +392,15 @@
}
],
labels
:
{
style
:
{
color
:
"white"
style
:
{
color
:
"white"
}
}
}
},
tooltip
:
{
headerFormat
:
"<b>{series.name}</b><br/>"
,
pointFormat
:
"{point.x:%Y년%m월%d일 %H시%M분}<br/>의
사망률 : {point.y:.2f}%
"
pointFormat
:
"{point.x:%Y년%m월%d일 %H시%M분}<br/>의
풍속 : {point.y:.2f}m/s
"
},
legend
:
{
//enabled: false
...
...
@@ -438,51 +419,50 @@
enabled
:
false
},
series
:
[
{
name
:
"풍속"
,
data
:
(
function
()
{
var
windArr
=
[],
time
=
new
Date
().
getTime
();
var
length
=
<%=
dataLen
%>
;
var
i
=
-
9
;
var
j
=
0
;
for
(
j
;
j
<
10
-
length
;
j
++
)
{
windArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
0
})
i
++
;
}
{
name
:
"풍속"
,
data
:
(
function
()
{
var
windArr
=
[],
time
=
new
Date
().
getTime
();
var
length
=
<%=
dataLen
%>
;
var
i
=
-
9
;
var
j
=
0
;
for
(
j
;
j
<
10
-
length
;
j
++
)
{
windArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
0
})
i
++
;
}
<%
wsArr
.
forEach
((
wsArr
)
=>
{
%>
var
temp
;
temp
=
<%=
wsArr
%>
;
// for(j;j<10;j++)
// {
// windArr.push({
// x: time + i * 60000,
// y: temp
// })
// i++;
// }
windArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
temp
})
i
++
;
temp
=
<%=
wsArr
%>
;
// for(j;j<10;j++)
// {
// windArr.push({
// x: time + i * 60000,
// y: temp
// })
// i++;
// }
windArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
temp
})
i
++
;
<%
})
%>
return
windArr
;
})(),
})(),
color
:
"#FFE08C"
}
]
});
color
:
"#FFE08C"
}
]
});
//강수량
var
chart4
=
Highcharts
.
chart
(
"container4"
,
{
chart
:
{
type
:
"spline"
,
...
...
@@ -494,13 +474,12 @@
// var series = this.series[0];
// setInterval(function () {
// var x = new Date().getTime(), // 현재 시간
// y =
0
; //
// y =
Math.random()
; //
// series.addPoint([x, y], true, true);
// },
60
000); //1000=1초
// },
3
000); //1000=1초
// }
// }
// }
,
backgroundColor
:
"rgba(255, 255, 255, 0.0)"
},
time
:
{
...
...
@@ -513,9 +492,8 @@
color
:
"#FFFFFF"
,
fontWeight
:
"bold"
,
fontFamily
:
'Yeon Sung'
,
fontSize
:
'25px'
fontSize
:
'25px'
}
},
xAxis
:
{
type
:
"datetime"
,
...
...
@@ -525,7 +503,6 @@
color
:
"white"
}
}
},
yAxis
:
{
title
:
{
...
...
@@ -533,7 +510,6 @@
style
:
{
color
:
"white"
}
},
plotLines
:
[
{
...
...
@@ -543,15 +519,15 @@
}
],
labels
:
{
style
:
{
color
:
"white"
style
:
{
color
:
"white"
}
}
}
},
tooltip
:
{
headerFormat
:
"<b>{series.name}</b><br/>"
,
pointFormat
:
"{point.x:%Y년%m월%d일 %H시%M분}<br/>의
사망률 : {point.y:.2f}%
"
pointFormat
:
"{point.x:%Y년%m월%d일 %H시%M분}<br/>의
강수량 : {point.y:.2f}mm
"
},
legend
:
{
//enabled: false
...
...
@@ -570,51 +546,88 @@
enabled
:
false
},
series
:
[
{
name
:
"강수량"
,
data
:
(
function
()
{
var
rainArr
=
[],
time
=
new
Date
().
getTime
();
var
length
=
<%=
dataLen
%>
;
var
i
=
-
9
;
var
j
=
0
;
for
(
j
;
j
<
10
-
length
;
j
++
)
{
rainArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
0
})
i
++
;
}
{
name
:
"강수량"
,
data
:
(
function
()
{
var
rainArr
=
[],
time
=
new
Date
().
getTime
();
var
length
=
<%=
dataLen
%>
;
var
i
=
-
9
;
var
j
=
0
;
for
(
j
;
j
<
10
-
length
;
j
++
)
{
rainArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
0
})
i
++
;
}
<%
rainArr
.
forEach
((
rainArr
)
=>
{
%>
var
temp
;
temp
=
<%=
rainArr
%>
;
// for(j;j<10;j++)
// {
// rainArr.push({
// x: time + i * 60000,
// y: temp
// })
// i++;
// }
rainArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
temp
})
i
++
;
temp
=
<%=
rainArr
%>
;
// for(j;j<10;j++)
// {
// rainArr.push({
// x: time + i * 60000,
// y: temp
// })
// i++;
// }
rainArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
temp
})
i
++
;
<%
})
%>
return
rainArr
;
})(),
color
:
"#FFE08C"
})(),
color
:
"#FFE08C"
}
]
});
var
socket
=
io
.
connect
(
'/'
,
{
transports
:
[
'websocket'
],
upgrade
:
false
});
socket
.
emit
(
"connection"
,
client_data
);
socket
.
on
(
"weatherInfo_minutely_send_to_client"
,
(
info
)
=>
{
//서버에서 client에게 메세지 전송
console
.
log
(
info
);
var
date
=
new
Date
().
getTime
();
chart1
.
series
[
0
].
addPoint
({
x
:
date
,
y
:
info
.
death
});
console
.
log
(
chart1
.
series
[
0
])
chart2
.
series
[
0
].
addPoint
({
x
:
date
,
y
:
info
.
temperature
*
1
});
console
.
log
(
chart2
.
series
[
0
])
chart3
.
series
[
0
].
addPoint
({
x
:
date
,
y
:
info
.
wind
*
1
});
console
.
log
(
chart3
.
series
[
0
])
chart4
.
series
[
0
].
addPoint
({
x
:
date
,
y
:
info
.
rain
*
1
});
console
.
log
(
chart4
.
series
[
0
])
}
]
});
</script>
</div>
</body>
</html>
\ No newline at end of file
</html>
-->
\ No newline at end of file
...
...
views/main.ejs
View file @
036e2a6
...
...
@@ -6,9 +6,9 @@
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<title>
Page Title
</title>
<!-- font -->
<link
href=
"https://fonts.googleapis.com/css?family=Nanum+Brush+Script&subset=korean"
rel=
"stylesheet"
>
<link
href=
"https://fonts.googleapis.com/css?family=Yeon+Sung&subset=korean"
rel=
"stylesheet"
>
<!-- font -->
<link
href=
"https://fonts.googleapis.com/css?family=Nanum+Brush+Script&subset=korean"
rel=
"stylesheet"
>
<link
href=
"https://fonts.googleapis.com/css?family=Yeon+Sung&subset=korean"
rel=
"stylesheet"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<link
rel=
"stylesheet"
type=
"text/css"
media=
"screen"
href=
"main.css"
/>
...
...
@@ -24,10 +24,19 @@
<script
src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"
></script>
<style
type=
"text/css"
>
html
,
{
margin
:
0
;
padding
:
0
;
}
body
{
background-image
:
url('images/background.jpg')
;
margin
:
0
;
padding
:
0
;
/* background-image: url('background.jpg');
background-repeat: no-repeat;
background-size
:
cover
;
background-size: cover;
*/
/* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */
}
...
...
@@ -41,6 +50,13 @@
font-size
:
20px
;
font-family
:
'Yeon Sung'
,
cursive
;
}
#banner
{
position
:
absolute
;
top
:
0
;
width
:
100%
;
}
#footer
{
position
:
absolute
;
bottom
:
0
;
...
...
@@ -48,29 +64,33 @@
height
:
50px
;
text-align
:
center
;
font-family
:
'Yeon Sung'
,
cursive
;
color
:
white
;
color
:
white
;
}
</style>
</head>
<body>
<div
style=
"width:100%; text-align: center; margin-top:170px;"
>
<h1
style=
"font-size:90px;"
>
당신이 지금 죽을 확률은?
</h1>
</div>
<br><br><br>
<div
style=
"width:100%; text-align: center;"
>
<form
action=
"/starting"
method=
"post"
>
<div
class=
"form-inline"
>
<label>
이름
</label>
<input
type=
"text"
name=
"name"
class=
"form-control"
placeholder=
"김철수"
style=
"width:200px;"
>
&
nbsp
&
nbsp
&
nbsp
&
nbsp
<label>
생년월일
</label>
<input
type=
"text"
name=
"birth"
class=
"form-control"
placeholder=
"971009"
style=
"width:200px;"
>
<br><br><br>
<input
type=
"submit"
value=
"시작하기"
class=
"btn btn-default"
style=
"font-family: 'Yeon Sung', cursive; width:100px;font-weight: bold; font-size: 18px; background-color: white;"
>
</div>
</form>
<img
src=
"images/background.jpg"
alt=
""
style=
"z-index:-1; min-width: 100%; min-height: 100%"
>
<div
id=
"banner"
>
<div
style=
"width:100%; text-align: center; padding-top:170px;"
>
<h1
style=
"font-size:90px;"
>
당신이 지금 죽을 확률은?
</h1>
</div>
<br><br><br>
<div
style=
"width:100%; text-align: center;"
>
<form
action=
"/starting"
method=
"post"
>
<div
class=
"form-inline"
>
<label>
이름
</label>
<input
type=
"text"
name=
"name"
class=
"form-control"
placeholder=
"김철수"
style=
"width:200px;"
>
&
nbsp
&
nbsp
&
nbsp
&
nbsp
<label>
생년월일
</label>
<input
type=
"text"
name=
"birth"
class=
"form-control"
placeholder=
"971009"
style=
"width:200px;"
>
<br><br><br>
<input
type=
"submit"
value=
"시작하기"
class=
"btn btn-default"
style=
"font-family: 'Yeon Sung', cursive; width:100px;font-weight: bold; font-size: 18px; background-color: white;"
>
</div>
</form>
</div>
</div>
<div
id=
"footer"
>
오픈소스SW개발 조민지 강환석 배희수
</div>
...
...
views/re.ejs
0 → 100644
View file @
036e2a6
<!DOCTYPE html>
<html>
<head>
<!-- font -->
<link
href=
"https://fonts.googleapis.com/css?family=Nanum+Brush+Script&subset=korean"
rel=
"stylesheet"
/>
<link
href=
"https://fonts.googleapis.com/css?family=Yeon+Sung&subset=korean"
rel=
"stylesheet"
/>
<meta
http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
/>
<title>
Highcharts Example
</title>
<style
type=
"text/css"
>
html
{
margin
:
0
;
padding
:
0
;
}
body
{
margin
:
0
;
padding
:
0
;
/* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */
/* background-color:#65799B; */
/* background-image: url("2.jpg");
background-repeat: no-repeat;
background-size: cover; */
}
#banner
{
position
:
absolute
;
top
:
0
;
width
:
100%
;
}
</style>
</head>
<body>
<script
src=
"highcharts.js"
></script>
<script
src=
"modules/exporting.js"
></script>
<script
src=
"modules/export-data.js"
></script>
<img
src=
"images/background.jpg"
alt=
""
style=
"z-index:-1; min-width: 100%; min-height: 100%"
>
<div
id=
"banner"
>
<div
id=
"container1"
style=
"width:1260px; height: 400px; margin: 0 auto"
></div>
<div
style=
"width:1275px; margin:0 auto;"
>
<div
style=
"display: inline-block;"
>
<div
id=
"container2"
style=
"width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
></div>
</div>
<div
style=
"display: inline-block;"
>
<div
id=
"container3"
style=
"width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
></div>
</div>
<div
style=
"display: inline-block;"
>
<div
id=
"container4"
style=
"width:400px; height: 300px; padding:0; margin-left:0px;"
></div>
</div>
</div>
<script
src=
"/socket.io/socket.io.js"
></script>
<script>
let
client_data
=
{
birth
:
"<%=birth%>"
,
name
:
"<%=name%>"
}
var
socket
=
io
.
connect
(
'/'
,
{
transports
:
[
'websocket'
],
upgrade
:
false
});
socket
.
emit
(
"connection"
,
client_data
);
socket
.
on
(
"weatherInfo_minutely_send_to_client"
,
(
info
)
=>
{
//서버에서 client에게 메세지 전송
console
.
log
(
info
);
var
date
=
new
Date
().
getTime
();
chart1
.
series
[
0
].
addPoint
({
x
:
date
,
y
:
info
.
death
,
color
:
"#FFE08C"
});
chart2
.
series
[
0
]
.
addPoint
({
x
:
date
,
y
:
info
.
temperature
,
color
:
"#FFE08C"
});
chart3
.
series
[
0
].
addPoint
({
x
:
date
,
y
:
info
.
wind
,
color
:
"#FFE08C"
});
chart4
.
series
[
0
].
addPoint
({
x
:
date
,
y
:
info
.
rain
,
color
:
"#FFE08C"
});
});
</script>
<script
type=
"text/javascript"
>
//사망률
var
chart1
=
Highcharts
.
chart
(
"container1"
,
{
chart
:
{
type
:
"spline"
,
animation
:
Highcharts
.
svg
,
// don't animate in old IE
marginRight
:
10
,
// events: {
// load: function () {
// // set up the updating of the chart each second
// var series = this.series[0];
// setInterval(function () {
// var x = new Date().getTime(), // 현재 시간
// y = 0; //여기에 새로 넣을 값
// series.addPoint([x, y], true, true);
// }, 60000); //1000=1초 -> 1분=60000
// }
// }
backgroundColor
:
"rgba(255, 255, 255, 0.0)"
},
time
:
{
useUTC
:
false
},
title
:
{
text
:
"<%=name%>님의 실시간 사망 확률"
,
style
:
{
color
:
"#FFFFFF"
,
fontWeight
:
"bold"
,
fontFamily
:
'Yeon Sung'
,
fontSize
:
'32px'
}
},
xAxis
:
{
type
:
"datetime"
,
tickPixelInterval
:
150
,
labels
:
{
style
:
{
color
:
"white"
}
}
},
yAxis
:
{
title
:
{
text
:
"Value"
,
style
:
{
color
:
"white"
}
},
plotLines
:
[
{
value
:
0
,
width
:
1
,
color
:
"#808080"
}
],
labels
:
{
style
:
{
color
:
"white"
}
}
},
tooltip
:
{
headerFormat
:
"<b>{series.name}</b><br/>"
,
pointFormat
:
"{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
},
legend
:
{
//enabled: false
layout
:
"vertical"
,
align
:
"left"
,
verticalAlign
:
"top"
,
x
:
100
,
y
:
50
,
floating
:
true
,
borderWidth
:
1
,
backgroundColor
:
(
Highcharts
.
theme
&&
Highcharts
.
theme
.
legendBackgroundColor
)
||
"#FFFFFF"
},
exporting
:
{
enabled
:
false
},
plotOptions
:
{
series
:
{
marker
:
{
radius
:
6
}
}
},
series
:
[
{
name
:
"사망률"
,
data
:
(
function
()
{
var
deathArr
=
[],
time
=
new
Date
().
getTime
();
var
length
=
<%=
dataLen
%>
;
var
i
=
-
9
;
//얘는 시간계산용
var
j
=
0
;
//얘는 반복문용
for
(;
j
<
10
-
length
;
j
++
)
{
deathArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
0
})
i
++
;
}
<%
probArr
.
forEach
((
probArr
)
=>
{
%>
var
temp
;
temp
=
<%=
probArr
%>
;
// for(;j<10;j++)
// {
// deathArr.push({
// x: time + i * 60000,
// y: temp
// })
// i++;
// }
deathArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
temp
})
i
++
;
<%
})
%>
return
deathArr
;
})(),
color
:
"#FFFFFF"
}
]
});
//기온
var
chart2
=
Highcharts
.
chart
(
"container2"
,
{
chart
:
{
type
:
"spline"
,
animation
:
Highcharts
.
svg
,
// don't animate in old IE
marginRight
:
10
,
// events: {
// load: function () {
// // set up the updating of the chart each second
// var series = this.series[0];
// setInterval(function () {
// var x = new Date().getTime(), // 현재 시간
// y = 0; //
// series.addPoint([x, y], true, true);
// }, 60000); //1000=1초
// }
// }
backgroundColor
:
"rgba(255, 255, 255, 0.0)"
},
time
:
{
useUTC
:
false
},
title
:
{
text
:
"기온"
,
style
:
{
color
:
"#FFFFFF"
,
fontWeight
:
"bold"
,
fontFamily
:
'Yeon Sung'
,
fontSize
:
'25px'
}
},
xAxis
:
{
type
:
"datetime"
,
tickPixelInterval
:
150
,
labels
:
{
style
:
{
color
:
"white"
}
}
},
yAxis
:
{
title
:
{
text
:
"Value"
,
style
:
{
color
:
"white"
}
},
plotLines
:
[
{
value
:
0
,
width
:
1
,
color
:
"#808080"
}
],
labels
:
{
style
:
{
color
:
"white"
}
}
},
tooltip
:
{
headerFormat
:
"<b>{series.name}</b><br/>"
,
pointFormat
:
"{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
},
legend
:
{
//enabled: false
layout
:
"vertical"
,
align
:
"left"
,
verticalAlign
:
"top"
,
x
:
100
,
y
:
50
,
floating
:
true
,
borderWidth
:
1
,
backgroundColor
:
(
Highcharts
.
theme
&&
Highcharts
.
theme
.
legendBackgroundColor
)
||
"#FFFFFF"
},
exporting
:
{
enabled
:
false
},
series
:
[
{
name
:
"기온"
,
data
:
(
function
()
{
var
tempArr
=
[],
time
=
new
Date
().
getTime
();
var
length
=
<%=
dataLen
%>
;
var
i
=
-
9
;
var
j
=
0
;
for
(
j
;
j
<
10
-
length
;
j
++
)
{
tempArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
0
})
i
++
;
}
<%
ptArr
.
forEach
((
ptArr
)
=>
{
%>
var
temp
;
temp
=
<%=
ptArr
%>
;
// for(j;j<10;j++)
// {
// tempArr.push({
// x: time + i * 60000,
// y: temp
// })
// i++;
// }
tempArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
temp
})
i
++
;
<%
})
%>
return
tempArr
;
})(),
color
:
"#FFE08C"
}
]
});
//풍속
var
chart3
=
Highcharts
.
chart
(
"container3"
,
{
chart
:
{
type
:
"spline"
,
animation
:
Highcharts
.
svg
,
// don't animate in old IE
marginRight
:
10
,
// events: {
// load: function () {
// // set up the updating of the chart each second
// var series = this.series[0];
// setInterval(function () {
// var x = new Date().getTime(), // 현재 시간
// y = 0; //
// series.addPoint([x, y], true, true);
// }, 60000); //1000=1초
// }
// }
backgroundColor
:
"rgba(255, 255, 255, 0.0)"
},
time
:
{
useUTC
:
false
},
title
:
{
text
:
"풍속"
,
style
:
{
color
:
"#FFFFFF"
,
fontWeight
:
"bold"
,
fontFamily
:
'Yeon Sung'
,
fontSize
:
'25px'
}
},
xAxis
:
{
type
:
"datetime"
,
tickPixelInterval
:
150
,
labels
:
{
style
:
{
color
:
"white"
}
}
},
yAxis
:
{
title
:
{
text
:
"Value"
,
style
:
{
color
:
"white"
}
},
plotLines
:
[
{
value
:
0
,
width
:
1
,
color
:
"#808080"
}
],
labels
:
{
style
:
{
color
:
"white"
}
}
},
tooltip
:
{
headerFormat
:
"<b>{series.name}</b><br/>"
,
pointFormat
:
"{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
},
legend
:
{
//enabled: false
layout
:
"vertical"
,
align
:
"left"
,
verticalAlign
:
"top"
,
x
:
100
,
y
:
50
,
floating
:
true
,
borderWidth
:
1
,
backgroundColor
:
(
Highcharts
.
theme
&&
Highcharts
.
theme
.
legendBackgroundColor
)
||
"#FFFFFF"
},
exporting
:
{
enabled
:
false
},
series
:
[
{
name
:
"풍속"
,
data
:
(
function
()
{
var
windArr
=
[],
time
=
new
Date
().
getTime
();
var
length
=
<%=
dataLen
%>
;
var
i
=
-
9
;
var
j
=
0
;
for
(
j
;
j
<
10
-
length
;
j
++
)
{
windArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
0
})
i
++
;
}
<%
wsArr
.
forEach
((
wsArr
)
=>
{
%>
var
temp
;
temp
=
<%=
wsArr
%>
;
// for(j;j<10;j++)
// {
// windArr.push({
// x: time + i * 60000,
// y: temp
// })
// i++;
// }
windArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
temp
})
i
++
;
<%
})
%>
return
windArr
;
})(),
color
:
"#FFE08C"
}
]
});
//강수량
var
chart4
=
Highcharts
.
chart
(
"container4"
,
{
chart
:
{
type
:
"spline"
,
animation
:
Highcharts
.
svg
,
// don't animate in old IE
marginRight
:
10
,
// events: {
// load: function () {
// // set up the updating of the chart each second
// var series = this.series[0];
// setInterval(function () {
// var x = new Date().getTime(), // 현재 시간
// y = 0; //
// series.addPoint([x, y], true, true);
// }, 60000); //1000=1초
// }
// }
backgroundColor
:
"rgba(255, 255, 255, 0.0)"
},
time
:
{
useUTC
:
false
},
title
:
{
text
:
"강수량"
,
style
:
{
color
:
"#FFFFFF"
,
fontWeight
:
"bold"
,
fontFamily
:
'Yeon Sung'
,
fontSize
:
'25px'
}
},
xAxis
:
{
type
:
"datetime"
,
tickPixelInterval
:
150
,
labels
:
{
style
:
{
color
:
"white"
}
}
},
yAxis
:
{
title
:
{
text
:
"Value"
,
style
:
{
color
:
"white"
}
},
plotLines
:
[
{
value
:
0
,
width
:
1
,
color
:
"#808080"
}
],
labels
:
{
style
:
{
color
:
"white"
}
}
},
tooltip
:
{
headerFormat
:
"<b>{series.name}</b><br/>"
,
pointFormat
:
"{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
},
legend
:
{
//enabled: false
layout
:
"vertical"
,
align
:
"left"
,
verticalAlign
:
"top"
,
x
:
100
,
y
:
50
,
floating
:
true
,
borderWidth
:
1
,
backgroundColor
:
(
Highcharts
.
theme
&&
Highcharts
.
theme
.
legendBackgroundColor
)
||
"#FFFFFF"
},
exporting
:
{
enabled
:
false
},
series
:
[
{
name
:
"강수량"
,
data
:
(
function
()
{
var
rainArr
=
[],
time
=
new
Date
().
getTime
();
var
length
=
<%=
dataLen
%>
;
var
i
=
-
9
;
var
j
=
0
;
for
(
j
;
j
<
10
-
length
;
j
++
)
{
rainArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
0
})
i
++
;
}
<%
rainArr
.
forEach
((
rainArr
)
=>
{
%>
var
temp
;
temp
=
<%=
rainArr
%>
;
// for(j;j<10;j++)
// {
// rainArr.push({
// x: time + i * 60000,
// y: temp
// })
// i++;
// }
rainArr
.
push
({
x
:
time
+
i
*
60000
,
y
:
temp
})
i
++
;
<%
})
%>
return
rainArr
;
})(),
color
:
"#FFE08C"
}
]
});
</script>
</div>
</body>
</html>
\ No newline at end of file
Please
register
or
login
to post a comment