김가영 / Probability Death

Go to a project
Toggle navigation Toggle navigation pinning
조민지
0541b9be 1 parent 84723cc2

그래프 페이지 디자인 완료

Inline Side-by-side
Showing 3 changed files with 187 additions and 78 deletions

205 KB

204 KB
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 - <head> 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 +
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 10 <meta name="viewport" content="width=device-width, initial-scale=1" />
6 <title>Highcharts Example</title> 11 <title>Highcharts Example</title>
7 12
8 - <style type="text/css"></style> 13 + <style type="text/css">
9 - </head> 14 + body {
10 - <body> 15 + /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */
16 + /* background-color:#65799B; */
17 + background-image: url("2.jpg");
18 + background-repeat: no-repeat;
19 + background-size: cover;
20 + }
21 + </style>
22 +</head>
23 +
24 +<body>
11 <script src="../code/highcharts.js"></script> 25 <script src="../code/highcharts.js"></script>
12 <script src="../code/modules/exporting.js"></script> 26 <script src="../code/modules/exporting.js"></script>
13 <script src="../code/modules/export-data.js"></script> 27 <script src="../code/modules/export-data.js"></script>
14 28
15 - <div 29 + <div id="container1" style="width:1260px; height: 400px; margin: 0 auto;"></div>
16 - id="container1"
17 - style="width:1260px; height: 400px; margin: 0 auto"
18 - ></div>
19 30
20 <div style="width:1275px; margin:0 auto;"> 31 <div style="width:1275px; margin:0 auto;">
21 <div style="display: inline-block;"> 32 <div style="display: inline-block;">
22 - <div 33 + <div id="container2" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
23 - id="container2"
24 - style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
25 - ></div>
26 </div> 34 </div>
27 <div style="display: inline-block;"> 35 <div style="display: inline-block;">
28 - <div 36 + <div id="container3" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
29 - id="container3"
30 - style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
31 - ></div>
32 </div> 37 </div>
33 38
34 <div style="display: inline-block;"> 39 <div style="display: inline-block;">
35 - <div 40 + <div id="container4" style="width:400px; height: 300px; padding:0; margin-left:0px;"></div>
36 - id="container4"
37 - style="width:400px; height: 300px; padding:0; margin-left:0px;"
38 - ></div>
39 </div> 41 </div>
40 </div> 42 </div>
41 43
42 - <!--첫번째 그래프--> 44 + <!-- 첫번째 그래프 -->
43 <script type="text/javascript"> 45 <script type="text/javascript">
44 - Highcharts.chart("container1", { 46 + var chart1 = Highcharts.chart("container1", {
45 chart: { 47 chart: {
46 - type: "areaspline", 48 + type: "spline",
47 animation: Highcharts.svg, // don't animate in old IE 49 animation: Highcharts.svg, // don't animate in old IE
48 marginRight: 10, 50 marginRight: 10,
49 events: { 51 events: {
50 - load: function() { 52 + load: function () {
51 // set up the updating of the chart each second 53 // set up the updating of the chart each second
52 var series = this.series[0]; 54 var series = this.series[0];
53 - setInterval(function() { 55 + setInterval(function () {
54 var x = new Date().getTime(), // 현재 시간 56 var x = new Date().getTime(), // 현재 시간
55 - y = 0.7; //여기에 새로 넣을 값 57 + y = Math.random(); //여기에 새로 넣을 값
56 - series.addPoint([x, y], true, true); 58 + series.addPoint({x:x,y:y,color:"#FFE08C"}, true, true);
57 }, 1000); //1000=1초 -> 1분=60000 59 }, 1000); //1000=1초 -> 1분=60000
58 } 60 }
59 - } 61 + },
62 +
63 + backgroundColor: "rgba(255, 255, 255, 0.0)"
60 }, 64 },
61 65
62 time: { 66 time: {
...@@ -64,35 +68,56 @@ ...@@ -64,35 +68,56 @@
64 }, 68 },
65 69
66 title: { 70 title: {
67 - text: "실시간 사망률" 71 + text: "실시간 사망률",
72 + style: {
73 + color: "#FFFFFF",
74 + fontWeight: "bold",
75 + fontFamily: 'Yeon Sung',
76 + fontSize:'32px'
77 + }
68 }, 78 },
69 xAxis: { 79 xAxis: {
70 type: "datetime", 80 type: "datetime",
71 - tickPixelInterval: 150 81 + tickPixelInterval: 150,
82 + labels: {
83 + style: {
84 + color: "white"
85 + }
86 + }
72 }, 87 },
73 yAxis: { 88 yAxis: {
74 title: { 89 title: {
75 - text: "Value" 90 + text: "Value",
91 + style: {
92 + color: "white"
93 + }
76 }, 94 },
95 +
77 plotLines: [ 96 plotLines: [
78 { 97 {
79 value: 0, 98 value: 0,
80 width: 1, 99 width: 1,
81 color: "#808080" 100 color: "#808080"
82 } 101 }
83 - ] 102 + ],
103 + labels: {
104 + style: {
105 + color: "white"
106 + }
107 + }
108 +
84 }, 109 },
85 tooltip: { 110 tooltip: {
86 headerFormat: "<b>{series.name}</b><br/>", 111 headerFormat: "<b>{series.name}</b><br/>",
87 - pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" 112 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
88 }, 113 },
89 legend: { 114 legend: {
90 //enabled: false 115 //enabled: false
91 layout: "vertical", 116 layout: "vertical",
92 align: "left", 117 align: "left",
93 verticalAlign: "top", 118 verticalAlign: "top",
94 - x: 120, 119 + x: 100,
95 - y: 70, 120 + y: 50,
96 floating: true, 121 floating: true,
97 borderWidth: 1, 122 borderWidth: 1,
98 backgroundColor: 123 backgroundColor:
...@@ -102,10 +127,19 @@ ...@@ -102,10 +127,19 @@
102 exporting: { 127 exporting: {
103 enabled: false 128 enabled: false
104 }, 129 },
130 +
131 +plotOptions: {
132 + series: {
133 + marker: {
134 + radius: 6
135 + }
136 + }
137 + },
138 +
105 series: [ 139 series: [
106 { 140 {
107 name: "사망률", 141 name: "사망률",
108 - data: (function() { 142 + data: (function () {
109 // generate an array of random data 143 // generate an array of random data
110 var data = [], 144 var data = [],
111 time = new Date().getTime(), 145 time = new Date().getTime(),
...@@ -114,17 +148,20 @@ ...@@ -114,17 +148,20 @@
114 for (i = -9; i <= 0; i += 1) { 148 for (i = -9; i <= 0; i += 1) {
115 data.push({ 149 data.push({
116 x: time + i * 1000, 150 x: time + i * 1000,
117 - y: 0 151 + y: 0,
118 }); 152 });
119 } 153 }
120 return data; 154 return data;
121 - })() 155 + })(),
156 +
157 + color: "#FFFFFF"
122 } 158 }
123 ] 159 ]
124 }); 160 });
161 +
125 </script> 162 </script>
126 163
127 - <!--두번째 그래프--> 164 + <!-- 두번째 그래프 -->
128 <script type="text/javascript"> 165 <script type="text/javascript">
129 Highcharts.chart("container2", { 166 Highcharts.chart("container2", {
130 chart: { 167 chart: {
...@@ -132,16 +169,18 @@ ...@@ -132,16 +169,18 @@
132 animation: Highcharts.svg, // don't animate in old IE 169 animation: Highcharts.svg, // don't animate in old IE
133 marginRight: 10, 170 marginRight: 10,
134 events: { 171 events: {
135 - load: function() { 172 + load: function () {
136 // set up the updating of the chart each second 173 // set up the updating of the chart each second
137 var series = this.series[0]; 174 var series = this.series[0];
138 - setInterval(function() { 175 + setInterval(function () {
139 var x = new Date().getTime(), // 현재 시간 176 var x = new Date().getTime(), // 현재 시간
140 y = Math.random(); // 177 y = Math.random(); //
141 series.addPoint([x, y], true, true); 178 series.addPoint([x, y], true, true);
142 }, 3000); //1000=1초 179 }, 3000); //1000=1초
143 } 180 }
144 - } 181 + },
182 +
183 + backgroundColor: "rgba(255, 255, 255, 0.0)"
145 }, 184 },
146 185
147 time: { 186 time: {
...@@ -149,15 +188,30 @@ ...@@ -149,15 +188,30 @@
149 }, 188 },
150 189
151 title: { 190 title: {
152 - text: "기온" 191 + text: "기온",
192 + style: {
193 + color: "#FFFFFF",
194 + fontWeight: "bold",
195 + fontFamily: 'Yeon Sung',
196 + fontSize:'25px'
197 + }
198 +
153 }, 199 },
154 xAxis: { 200 xAxis: {
155 type: "datetime", 201 type: "datetime",
156 - tickPixelInterval: 150 202 + tickPixelInterval: 150,
203 + labels: {
204 + style: {
205 + color: "white"
206 + }
207 + }
157 }, 208 },
158 yAxis: { 209 yAxis: {
159 title: { 210 title: {
160 - text: "Value" 211 + text: "Value",
212 + style: {
213 + color: "white"
214 + }
161 }, 215 },
162 plotLines: [ 216 plotLines: [
163 { 217 {
...@@ -165,19 +219,25 @@ ...@@ -165,19 +219,25 @@
165 width: 1, 219 width: 1,
166 color: "#808080" 220 color: "#808080"
167 } 221 }
168 - ] 222 + ],
223 + labels: {
224 + style: {
225 + color: "white"
226 + }
227 + }
228 +
169 }, 229 },
170 tooltip: { 230 tooltip: {
171 headerFormat: "<b>{series.name}</b><br/>", 231 headerFormat: "<b>{series.name}</b><br/>",
172 - pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" 232 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
173 }, 233 },
174 legend: { 234 legend: {
175 //enabled: false 235 //enabled: false
176 layout: "vertical", 236 layout: "vertical",
177 align: "left", 237 align: "left",
178 verticalAlign: "top", 238 verticalAlign: "top",
179 - x: 120, 239 + x: 100,
180 - y: 70, 240 + y: 50,
181 floating: true, 241 floating: true,
182 borderWidth: 1, 242 borderWidth: 1,
183 backgroundColor: 243 backgroundColor:
...@@ -190,7 +250,7 @@ ...@@ -190,7 +250,7 @@
190 series: [ 250 series: [
191 { 251 {
192 name: "기온", 252 name: "기온",
193 - data: (function() { 253 + data: (function () {
194 // generate an array of random data 254 // generate an array of random data
195 var data = [], 255 var data = [],
196 time = new Date().getTime(), 256 time = new Date().getTime(),
...@@ -203,13 +263,15 @@ ...@@ -203,13 +263,15 @@
203 }); 263 });
204 } 264 }
205 return data; 265 return data;
206 - })() 266 + })(),
267 +
268 + color: "#FFE08C"
207 } 269 }
208 ] 270 ]
209 }); 271 });
210 </script> 272 </script>
211 273
212 - <!--세번째 그래프--> 274 + <!-- 세번째 그래프 -->
213 <script type="text/javascript"> 275 <script type="text/javascript">
214 Highcharts.chart("container3", { 276 Highcharts.chart("container3", {
215 chart: { 277 chart: {
...@@ -217,16 +279,17 @@ ...@@ -217,16 +279,17 @@
217 animation: Highcharts.svg, // don't animate in old IE 279 animation: Highcharts.svg, // don't animate in old IE
218 marginRight: 10, 280 marginRight: 10,
219 events: { 281 events: {
220 - load: function() { 282 + load: function () {
221 // set up the updating of the chart each second 283 // set up the updating of the chart each second
222 var series = this.series[0]; 284 var series = this.series[0];
223 - setInterval(function() { 285 + setInterval(function () {
224 var x = new Date().getTime(), // 현재 시간 286 var x = new Date().getTime(), // 현재 시간
225 y = Math.random(); // 287 y = Math.random(); //
226 series.addPoint([x, y], true, true); 288 series.addPoint([x, y], true, true);
227 }, 3000); //1000=1초 289 }, 3000); //1000=1초
228 } 290 }
229 - } 291 + },
292 + backgroundColor: "rgba(255, 255, 255, 0.0)"
230 }, 293 },
231 294
232 time: { 295 time: {
...@@ -234,15 +297,29 @@ ...@@ -234,15 +297,29 @@
234 }, 297 },
235 298
236 title: { 299 title: {
237 - text: "풍속" 300 + text: "풍속",
301 + style: {
302 + color: "#FFFFFF",
303 + fontWeight: "bold",
304 + fontFamily: 'Yeon Sung',
305 + fontSize:'25px'
306 + }
238 }, 307 },
239 xAxis: { 308 xAxis: {
240 type: "datetime", 309 type: "datetime",
241 - tickPixelInterval: 150 310 + tickPixelInterval: 150,
311 + labels: {
312 + style: {
313 + color: "white"
314 + }
315 + }
242 }, 316 },
243 yAxis: { 317 yAxis: {
244 title: { 318 title: {
245 - text: "Value" 319 + text: "Value",
320 + style: {
321 + color: "white"
322 + }
246 }, 323 },
247 plotLines: [ 324 plotLines: [
248 { 325 {
...@@ -250,19 +327,25 @@ ...@@ -250,19 +327,25 @@
250 width: 1, 327 width: 1,
251 color: "#808080" 328 color: "#808080"
252 } 329 }
253 - ] 330 + ],
331 + labels: {
332 + style: {
333 + color: "white"
334 + }
335 + }
336 +
254 }, 337 },
255 tooltip: { 338 tooltip: {
256 headerFormat: "<b>{series.name}</b><br/>", 339 headerFormat: "<b>{series.name}</b><br/>",
257 - pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" 340 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
258 }, 341 },
259 legend: { 342 legend: {
260 //enabled: false 343 //enabled: false
261 layout: "vertical", 344 layout: "vertical",
262 align: "left", 345 align: "left",
263 verticalAlign: "top", 346 verticalAlign: "top",
264 - x: 120, 347 + x: 100,
265 - y: 70, 348 + y: 50,
266 floating: true, 349 floating: true,
267 borderWidth: 1, 350 borderWidth: 1,
268 backgroundColor: 351 backgroundColor:
...@@ -275,7 +358,7 @@ ...@@ -275,7 +358,7 @@
275 series: [ 358 series: [
276 { 359 {
277 name: "풍속", 360 name: "풍속",
278 - data: (function() { 361 + data: (function () {
279 // generate an array of random data 362 // generate an array of random data
280 var data = [], 363 var data = [],
281 time = new Date().getTime(), 364 time = new Date().getTime(),
...@@ -288,13 +371,15 @@ ...@@ -288,13 +371,15 @@
288 }); 371 });
289 } 372 }
290 return data; 373 return data;
291 - })() 374 + })(),
375 +
376 + color: "#FFE08C"
292 } 377 }
293 ] 378 ]
294 }); 379 });
295 </script> 380 </script>
296 381
297 - <!--네번째 그래프--> 382 + <!-- 네번째 그래프 -->
298 <script type="text/javascript"> 383 <script type="text/javascript">
299 Highcharts.chart("container4", { 384 Highcharts.chart("container4", {
300 chart: { 385 chart: {
...@@ -302,16 +387,17 @@ ...@@ -302,16 +387,17 @@
302 animation: Highcharts.svg, // don't animate in old IE 387 animation: Highcharts.svg, // don't animate in old IE
303 marginRight: 10, 388 marginRight: 10,
304 events: { 389 events: {
305 - load: function() { 390 + load: function () {
306 // set up the updating of the chart each second 391 // set up the updating of the chart each second
307 var series = this.series[0]; 392 var series = this.series[0];
308 - setInterval(function() { 393 + setInterval(function () {
309 var x = new Date().getTime(), // 현재 시간 394 var x = new Date().getTime(), // 현재 시간
310 y = Math.random(); // 395 y = Math.random(); //
311 series.addPoint([x, y], true, true); 396 series.addPoint([x, y], true, true);
312 }, 3000); //1000=1초 397 }, 3000); //1000=1초
313 } 398 }
314 - } 399 + },
400 + backgroundColor: "rgba(255, 255, 255, 0.0)"
315 }, 401 },
316 402
317 time: { 403 time: {
...@@ -319,15 +405,29 @@ ...@@ -319,15 +405,29 @@
319 }, 405 },
320 406
321 title: { 407 title: {
322 - text: "강수량" 408 + text: "강수량",
409 + style: {
410 + color: "#FFFFFF",
411 + fontWeight: "bold",
412 + fontFamily: 'Yeon Sung',
413 + fontSize:'25px'
414 + }
323 }, 415 },
324 xAxis: { 416 xAxis: {
325 type: "datetime", 417 type: "datetime",
326 - tickPixelInterval: 150 418 + tickPixelInterval: 150,
419 + labels: {
420 + style: {
421 + color: "white"
422 + }
423 + }
327 }, 424 },
328 yAxis: { 425 yAxis: {
329 title: { 426 title: {
330 - text: "Value" 427 + text: "Value",
428 + style: {
429 + color: "white"
430 + }
331 }, 431 },
332 plotLines: [ 432 plotLines: [
333 { 433 {
...@@ -335,19 +435,25 @@ ...@@ -335,19 +435,25 @@
335 width: 1, 435 width: 1,
336 color: "#808080" 436 color: "#808080"
337 } 437 }
338 - ] 438 + ],
439 + labels: {
440 + style: {
441 + color: "white"
442 + }
443 + }
444 +
339 }, 445 },
340 tooltip: { 446 tooltip: {
341 headerFormat: "<b>{series.name}</b><br/>", 447 headerFormat: "<b>{series.name}</b><br/>",
342 - pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" 448 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
343 }, 449 },
344 legend: { 450 legend: {
345 //enabled: false 451 //enabled: false
346 layout: "vertical", 452 layout: "vertical",
347 align: "left", 453 align: "left",
348 verticalAlign: "top", 454 verticalAlign: "top",
349 - x: 120, 455 + x: 100,
350 - y: 70, 456 + y: 50,
351 floating: true, 457 floating: true,
352 borderWidth: 1, 458 borderWidth: 1,
353 backgroundColor: 459 backgroundColor:
...@@ -360,7 +466,7 @@ ...@@ -360,7 +466,7 @@
360 series: [ 466 series: [
361 { 467 {
362 name: "강수량", 468 name: "강수량",
363 - data: (function() { 469 + data: (function () {
364 // generate an array of random data 470 // generate an array of random data
365 var data = [], 471 var data = [],
366 time = new Date().getTime(), 472 time = new Date().getTime(),
...@@ -373,10 +479,13 @@ ...@@ -373,10 +479,13 @@
373 }); 479 });
374 } 480 }
375 return data; 481 return data;
376 - })() 482 + })(),
483 +
484 + color: "#FFE08C"
377 } 485 }
378 ] 486 ]
379 }); 487 });
380 </script> 488 </script>
381 - </body> 489 +</body>
490 +
382 </html> 491 </html>
...\ No newline at end of file ...\ No newline at end of file
......