조민지 / 2018_2_project

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

그래프 페이지 디자인 완료

Inline Side-by-side
Showing 3 changed files with 452 additions and 343 deletions

205 KB

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