Showing
2 changed files
with
100 additions
and
59 deletions
... | @@ -8,38 +8,38 @@ | ... | @@ -8,38 +8,38 @@ |
8 | <style type="text/css"></style> | 8 | <style type="text/css"></style> |
9 | </head> | 9 | </head> |
10 | <body> | 10 | <body> |
11 | - <script src="../../code/highcharts.js"></script> | 11 | + <script src="../code/highcharts.js"></script> |
12 | - <script src="../../code/modules/exporting.js"></script> | 12 | + <script src="../code/modules/exporting.js"></script> |
13 | - <script src="../../code/modules/export-data.js"></script> | 13 | + <script src="../code/modules/export-data.js"></script> |
14 | 14 | ||
15 | <div | 15 | <div |
16 | id="container1" | 16 | id="container1" |
17 | style="width:1260px; height: 400px; margin: 0 auto" | 17 | style="width:1260px; height: 400px; margin: 0 auto" |
18 | ></div> | 18 | ></div> |
19 | 19 | ||
20 | -<div style="width:1275px; margin:0 auto;"> | 20 | + <div style="width:1275px; margin:0 auto;"> |
21 | - <div style="display: inline-block;"> | 21 | + <div style="display: inline-block;"> |
22 | <div | 22 | <div |
23 | id="container2" | 23 | id="container2" |
24 | style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" | 24 | style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" |
25 | ></div> | 25 | ></div> |
26 | </div> | 26 | </div> |
27 | <div style="display: inline-block;"> | 27 | <div style="display: inline-block;"> |
28 | - <div | 28 | + <div |
29 | - id="container3" | 29 | + id="container3" |
30 | - style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" | 30 | + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" |
31 | - ></div> | 31 | + ></div> |
32 | - </div> | 32 | + </div> |
33 | - | 33 | + |
34 | - <div style="display: inline-block;"> | 34 | + <div style="display: inline-block;"> |
35 | - <div | 35 | + <div |
36 | - id="container4" | 36 | + id="container4" |
37 | - style="width:400px; height: 300px; padding:0; margin-left:0px;" | 37 | + style="width:400px; height: 300px; padding:0; margin-left:0px;" |
38 | - ></div> | 38 | + ></div> |
39 | - </div> | 39 | + </div> |
40 | - | 40 | + </div> |
41 | -</div> | ||
42 | 41 | ||
42 | + <!--첫번째 그래프--> | ||
43 | <script type="text/javascript"> | 43 | <script type="text/javascript"> |
44 | Highcharts.chart("container1", { | 44 | Highcharts.chart("container1", { |
45 | chart: { | 45 | chart: { |
... | @@ -52,19 +52,19 @@ | ... | @@ -52,19 +52,19 @@ |
52 | var series = this.series[0]; | 52 | var series = this.series[0]; |
53 | setInterval(function() { | 53 | setInterval(function() { |
54 | var x = new Date().getTime(), // 현재 시간 | 54 | var x = new Date().getTime(), // 현재 시간 |
55 | - y = 0.7 //여기에 새로 넣을 값 | 55 | + y = 0.7; //여기에 새로 넣을 값 |
56 | series.addPoint([x, y], true, true); | 56 | series.addPoint([x, y], true, true); |
57 | }, 1000); //1000=1초 -> 1분=60000 | 57 | }, 1000); //1000=1초 -> 1분=60000 |
58 | } | 58 | } |
59 | } | 59 | } |
60 | }, | 60 | }, |
61 | - | 61 | + |
62 | time: { | 62 | time: { |
63 | useUTC: false | 63 | useUTC: false |
64 | }, | 64 | }, |
65 | 65 | ||
66 | title: { | 66 | title: { |
67 | - text: "환또기바보" | 67 | + text: "실시간 사망률" |
68 | }, | 68 | }, |
69 | xAxis: { | 69 | xAxis: { |
70 | type: "datetime", | 70 | type: "datetime", |
... | @@ -104,14 +104,14 @@ | ... | @@ -104,14 +104,14 @@ |
104 | }, | 104 | }, |
105 | series: [ | 105 | series: [ |
106 | { | 106 | { |
107 | - name: "사망률(%)", | 107 | + name: "사망률", |
108 | data: (function() { | 108 | data: (function() { |
109 | // generate an array of random data | 109 | // generate an array of random data |
110 | var data = [], | 110 | var data = [], |
111 | time = new Date().getTime(), | 111 | time = new Date().getTime(), |
112 | i; | 112 | i; |
113 | 113 | ||
114 | - for (i = -19; i <= 0; i += 1) { | 114 | + for (i = -9; i <= 0; i += 1) { |
115 | data.push({ | 115 | data.push({ |
116 | x: time + i * 1000, | 116 | x: time + i * 1000, |
117 | y: 0 | 117 | y: 0 |
... | @@ -122,7 +122,10 @@ | ... | @@ -122,7 +122,10 @@ |
122 | } | 122 | } |
123 | ] | 123 | ] |
124 | }); | 124 | }); |
125 | + </script> | ||
125 | 126 | ||
127 | + <!--두번째 그래프--> | ||
128 | + <script type="text/javascript"> | ||
126 | Highcharts.chart("container2", { | 129 | Highcharts.chart("container2", { |
127 | chart: { | 130 | chart: { |
128 | type: "spline", | 131 | type: "spline", |
... | @@ -146,7 +149,7 @@ | ... | @@ -146,7 +149,7 @@ |
146 | }, | 149 | }, |
147 | 150 | ||
148 | title: { | 151 | title: { |
149 | - text: "실시간 사망률" | 152 | + text: "기온" |
150 | }, | 153 | }, |
151 | xAxis: { | 154 | xAxis: { |
152 | type: "datetime", | 155 | type: "datetime", |
... | @@ -186,7 +189,7 @@ | ... | @@ -186,7 +189,7 @@ |
186 | }, | 189 | }, |
187 | series: [ | 190 | series: [ |
188 | { | 191 | { |
189 | - name: "사망률(%)", | 192 | + name: "기온", |
190 | data: (function() { | 193 | data: (function() { |
191 | // generate an array of random data | 194 | // generate an array of random data |
192 | var data = [], | 195 | var data = [], |
... | @@ -204,7 +207,10 @@ | ... | @@ -204,7 +207,10 @@ |
204 | } | 207 | } |
205 | ] | 208 | ] |
206 | }); | 209 | }); |
210 | + </script> | ||
207 | 211 | ||
212 | + <!--세번째 그래프--> | ||
213 | + <script type="text/javascript"> | ||
208 | Highcharts.chart("container3", { | 214 | Highcharts.chart("container3", { |
209 | chart: { | 215 | chart: { |
210 | type: "spline", | 216 | type: "spline", |
... | @@ -228,7 +234,7 @@ | ... | @@ -228,7 +234,7 @@ |
228 | }, | 234 | }, |
229 | 235 | ||
230 | title: { | 236 | title: { |
231 | - text: "실시간 사망률" | 237 | + text: "풍속" |
232 | }, | 238 | }, |
233 | xAxis: { | 239 | xAxis: { |
234 | type: "datetime", | 240 | type: "datetime", |
... | @@ -268,7 +274,7 @@ | ... | @@ -268,7 +274,7 @@ |
268 | }, | 274 | }, |
269 | series: [ | 275 | series: [ |
270 | { | 276 | { |
271 | - name: "사망률(%)", | 277 | + name: "풍속", |
272 | data: (function() { | 278 | data: (function() { |
273 | // generate an array of random data | 279 | // generate an array of random data |
274 | var data = [], | 280 | var data = [], |
... | @@ -286,7 +292,10 @@ | ... | @@ -286,7 +292,10 @@ |
286 | } | 292 | } |
287 | ] | 293 | ] |
288 | }); | 294 | }); |
295 | + </script> | ||
289 | 296 | ||
297 | + <!--네번째 그래프--> | ||
298 | + <script type="text/javascript"> | ||
290 | Highcharts.chart("container4", { | 299 | Highcharts.chart("container4", { |
291 | chart: { | 300 | chart: { |
292 | type: "spline", | 301 | type: "spline", |
... | @@ -310,7 +319,7 @@ | ... | @@ -310,7 +319,7 @@ |
310 | }, | 319 | }, |
311 | 320 | ||
312 | title: { | 321 | title: { |
313 | - text: "실시간 사망률" | 322 | + text: "강수량" |
314 | }, | 323 | }, |
315 | xAxis: { | 324 | xAxis: { |
316 | type: "datetime", | 325 | type: "datetime", |
... | @@ -350,7 +359,7 @@ | ... | @@ -350,7 +359,7 @@ |
350 | }, | 359 | }, |
351 | series: [ | 360 | series: [ |
352 | { | 361 | { |
353 | - name: "사망률(%)", | 362 | + name: "강수량", |
354 | data: (function() { | 363 | data: (function() { |
355 | // generate an array of random data | 364 | // generate an array of random data |
356 | var data = [], | 365 | var data = [], |
... | @@ -368,7 +377,6 @@ | ... | @@ -368,7 +377,6 @@ |
368 | } | 377 | } |
369 | ] | 378 | ] |
370 | }); | 379 | }); |
371 | - | ||
372 | </script> | 380 | </script> |
373 | </body> | 381 | </body> |
374 | </html> | 382 | </html> | ... | ... |
... | @@ -17,29 +17,29 @@ | ... | @@ -17,29 +17,29 @@ |
17 | style="width:1260px; height: 400px; margin: 0 auto" | 17 | style="width:1260px; height: 400px; margin: 0 auto" |
18 | ></div> | 18 | ></div> |
19 | 19 | ||
20 | -<div style="width:1275px; margin:0 auto;"> | 20 | + <div style="width:1275px; margin:0 auto;"> |
21 | - <div style="display: inline-block;"> | 21 | + <div style="display: inline-block;"> |
22 | <div | 22 | <div |
23 | id="container2" | 23 | id="container2" |
24 | style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" | 24 | style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" |
25 | ></div> | 25 | ></div> |
26 | </div> | 26 | </div> |
27 | <div style="display: inline-block;"> | 27 | <div style="display: inline-block;"> |
28 | - <div | 28 | + <div |
29 | - id="container3" | 29 | + id="container3" |
30 | - style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" | 30 | + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" |
31 | - ></div> | 31 | + ></div> |
32 | - </div> | 32 | + </div> |
33 | - | ||
34 | - <div style="display: inline-block;"> | ||
35 | - <div | ||
36 | - id="container4" | ||
37 | - style="width:400px; height: 300px; padding:0; margin-left:0px;" | ||
38 | - ></div> | ||
39 | - </div> | ||
40 | - | ||
41 | -</div> | ||
42 | 33 | ||
34 | + <div style="display: inline-block;"> | ||
35 | + <div | ||
36 | + id="container4" | ||
37 | + style="width:400px; height: 300px; padding:0; margin-left:0px;" | ||
38 | + ></div> | ||
39 | + </div> | ||
40 | + </div> | ||
41 | + | ||
42 | + <!-- 첫번째 그래프 --> | ||
43 | <script type="text/javascript"> | 43 | <script type="text/javascript"> |
44 | Highcharts.chart("container1", { | 44 | Highcharts.chart("container1", { |
45 | chart: { | 45 | chart: { |
... | @@ -52,13 +52,13 @@ | ... | @@ -52,13 +52,13 @@ |
52 | var series = this.series[0]; | 52 | var series = this.series[0]; |
53 | setInterval(function() { | 53 | setInterval(function() { |
54 | var x = new Date().getTime(), // 현재 시간 | 54 | var x = new Date().getTime(), // 현재 시간 |
55 | - y = 0.7 //여기에 새로 넣을 값 | 55 | + y = 0.7; //여기에 새로 넣을 값 |
56 | series.addPoint([x, y], true, true); | 56 | series.addPoint([x, y], true, true); |
57 | - }, 1000); //1000=1초 -> 1분=60000 | 57 | + }, 60000); //1000=1초 -> 1분=60000 |
58 | } | 58 | } |
59 | } | 59 | } |
60 | }, | 60 | }, |
61 | - | 61 | + |
62 | time: { | 62 | time: { |
63 | useUTC: false | 63 | useUTC: false |
64 | }, | 64 | }, |
... | @@ -104,16 +104,41 @@ | ... | @@ -104,16 +104,41 @@ |
104 | }, | 104 | }, |
105 | series: [ | 105 | series: [ |
106 | { | 106 | { |
107 | - name: "사망률(%)", | 107 | + name: "사망률", |
108 | data: (function() { | 108 | data: (function() { |
109 | // generate an array of random data | 109 | // generate an array of random data |
110 | var data = [], | 110 | var data = [], |
111 | time = new Date().getTime(), | 111 | time = new Date().getTime(), |
112 | i; | 112 | i; |
113 | 113 | ||
114 | + var deathArr = new Arr(); | ||
115 | + length= <%=dataLen%>; | ||
116 | + var i=-9; | ||
117 | + for(var i;i<length;i++) | ||
118 | + { | ||
119 | + deathArr.push({ | ||
120 | + x: time + i * 60000, | ||
121 | + y: 0 | ||
122 | + }) | ||
123 | + } | ||
124 | + | ||
125 | + | ||
126 | + <%probArr.forEach((probArr)=>{%> | ||
127 | + temp; | ||
128 | + temp= <%=probArr%>; | ||
129 | + | ||
130 | + for(var j=length;i<10;j++) | ||
131 | + { | ||
132 | + deathArr.push({ | ||
133 | + x: time + j * 60000, | ||
134 | + y: | ||
135 | + }) | ||
136 | + } | ||
137 | + <%})%> | ||
138 | + | ||
114 | for (i = -19; i <= 0; i += 1) { | 139 | for (i = -19; i <= 0; i += 1) { |
115 | data.push({ | 140 | data.push({ |
116 | - x: time + i * 1000, | 141 | + x: time + i * 60000, |
117 | y: 0 | 142 | y: 0 |
118 | }); | 143 | }); |
119 | } | 144 | } |
... | @@ -122,7 +147,10 @@ | ... | @@ -122,7 +147,10 @@ |
122 | } | 147 | } |
123 | ] | 148 | ] |
124 | }); | 149 | }); |
150 | + </script> | ||
125 | 151 | ||
152 | + <!-- 두번째 그래프 --> | ||
153 | + <script type="text/javascript"> | ||
126 | Highcharts.chart("container2", { | 154 | Highcharts.chart("container2", { |
127 | chart: { | 155 | chart: { |
128 | type: "spline", | 156 | type: "spline", |
... | @@ -146,7 +174,7 @@ | ... | @@ -146,7 +174,7 @@ |
146 | }, | 174 | }, |
147 | 175 | ||
148 | title: { | 176 | title: { |
149 | - text: "실시간 사망률" | 177 | + text: "기온" |
150 | }, | 178 | }, |
151 | xAxis: { | 179 | xAxis: { |
152 | type: "datetime", | 180 | type: "datetime", |
... | @@ -186,7 +214,7 @@ | ... | @@ -186,7 +214,7 @@ |
186 | }, | 214 | }, |
187 | series: [ | 215 | series: [ |
188 | { | 216 | { |
189 | - name: "사망률(%)", | 217 | + name: "기온", |
190 | data: (function() { | 218 | data: (function() { |
191 | // generate an array of random data | 219 | // generate an array of random data |
192 | var data = [], | 220 | var data = [], |
... | @@ -204,7 +232,10 @@ | ... | @@ -204,7 +232,10 @@ |
204 | } | 232 | } |
205 | ] | 233 | ] |
206 | }); | 234 | }); |
235 | + </script> | ||
207 | 236 | ||
237 | + <!-- 세번째 그래프 --> | ||
238 | + <script type="text/javascript"> | ||
208 | Highcharts.chart("container3", { | 239 | Highcharts.chart("container3", { |
209 | chart: { | 240 | chart: { |
210 | type: "spline", | 241 | type: "spline", |
... | @@ -228,7 +259,7 @@ | ... | @@ -228,7 +259,7 @@ |
228 | }, | 259 | }, |
229 | 260 | ||
230 | title: { | 261 | title: { |
231 | - text: "실시간 사망률" | 262 | + text: "풍속" |
232 | }, | 263 | }, |
233 | xAxis: { | 264 | xAxis: { |
234 | type: "datetime", | 265 | type: "datetime", |
... | @@ -268,7 +299,7 @@ | ... | @@ -268,7 +299,7 @@ |
268 | }, | 299 | }, |
269 | series: [ | 300 | series: [ |
270 | { | 301 | { |
271 | - name: "사망률(%)", | 302 | + name: "풍속", |
272 | data: (function() { | 303 | data: (function() { |
273 | // generate an array of random data | 304 | // generate an array of random data |
274 | var data = [], | 305 | var data = [], |
... | @@ -286,7 +317,10 @@ | ... | @@ -286,7 +317,10 @@ |
286 | } | 317 | } |
287 | ] | 318 | ] |
288 | }); | 319 | }); |
320 | + </script> | ||
289 | 321 | ||
322 | + <!-- 네번째 그래프 --> | ||
323 | + <script type="text/javascript"> | ||
290 | Highcharts.chart("container4", { | 324 | Highcharts.chart("container4", { |
291 | chart: { | 325 | chart: { |
292 | type: "spline", | 326 | type: "spline", |
... | @@ -310,7 +344,7 @@ | ... | @@ -310,7 +344,7 @@ |
310 | }, | 344 | }, |
311 | 345 | ||
312 | title: { | 346 | title: { |
313 | - text: "실시간 사망률" | 347 | + text: "강수량" |
314 | }, | 348 | }, |
315 | xAxis: { | 349 | xAxis: { |
316 | type: "datetime", | 350 | type: "datetime", |
... | @@ -350,7 +384,7 @@ | ... | @@ -350,7 +384,7 @@ |
350 | }, | 384 | }, |
351 | series: [ | 385 | series: [ |
352 | { | 386 | { |
353 | - name: "사망률(%)", | 387 | + name: "강수량", |
354 | data: (function() { | 388 | data: (function() { |
355 | // generate an array of random data | 389 | // generate an array of random data |
356 | var data = [], | 390 | var data = [], |
... | @@ -368,7 +402,6 @@ | ... | @@ -368,7 +402,6 @@ |
368 | } | 402 | } |
369 | ] | 403 | ] |
370 | }); | 404 | }); |
371 | - | ||
372 | </script> | 405 | </script> |
373 | </body> | 406 | </body> |
374 | </html> | 407 | </html> | ... | ... |
-
Please register or login to post a comment