이정민 / OPproject

Go to a project
Toggle navigation Toggle navigation pinning
이정민
68c94e38 1 parent 8bc7fe3f

graph

Inline Side-by-side
Showing 8 changed files with 1236 additions and 0 deletions

205 KB

204 KB
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 + <meta name="viewport" content="width=device-width, initial-scale=1" />
6 + <title>Highcharts Example</title>
7 +
8 + <style type="text/css"></style>
9 + </head>
10 + <body>
11 + <script src="../../code/highcharts.js"></script>
12 + <script src="../../code/modules/exporting.js"></script>
13 + <script src="../../code/modules/export-data.js"></script>
14 +
15 + <div
16 + id="container1"
17 + style="width:1260px; height: 400px; margin: 0 auto"
18 + ></div>
19 +
20 +<div style="width:1275px; margin:0 auto;">
21 + <div style="display: inline-block;">
22 + <div
23 + id="container2"
24 + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
25 + ></div>
26 + </div>
27 + <div style="display: inline-block;">
28 + <div
29 + id="container3"
30 + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
31 + ></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 +
43 + <script type="text/javascript">
44 + Highcharts.chart("container1", {
45 + chart: {
46 + type: "areaspline",
47 + animation: Highcharts.svg, // don't animate in old IE
48 + marginRight: 10,
49 + events: {
50 + load: function() {
51 + // set up the updating of the chart each second
52 + var series = this.series[0];
53 + setInterval(function() {
54 + var x = new Date().getTime(), // 현재 시간
55 + y = 0.7
56 + series.addPoint([x, y], true, true);
57 + }, 3000); //1000=1초
58 + }
59 + }
60 + },
61 +
62 + time: {
63 + useUTC: false
64 + },
65 +
66 + title: {
67 + text: "실시간 사망률"
68 + },
69 + xAxis: {
70 + type: "datetime",
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 + },
105 + series: [
106 + {
107 + name: "사망률(%)",
108 + data: (function() {
109 + // generate an array of random data
110 + var data = [],
111 + time = new Date().getTime(),
112 + i;
113 +
114 + for (i = -19; i <= 0; i += 1) {
115 + data.push({
116 + x: time + i * 3000,
117 + y: 0
118 + });
119 + }
120 + return data;
121 + })()
122 + }
123 + ]
124 + });
125 +
126 + Highcharts.chart("container2", {
127 + chart: {
128 + type: "spline",
129 + animation: Highcharts.svg, // don't animate in old IE
130 + marginRight: 10,
131 + events: {
132 + load: function() {
133 + // set up the updating of the chart each second
134 + var series = this.series[0];
135 + setInterval(function() {
136 + var x = new Date().getTime(), // 현재 시간
137 + y = Math.random(); //
138 + series.addPoint([x, y], true, true);
139 + }, 3000); //1000=1초
140 + }
141 + }
142 + },
143 +
144 + time: {
145 + useUTC: false
146 + },
147 +
148 + title: {
149 + text: "실시간 사망률"
150 + },
151 + xAxis: {
152 + type: "datetime",
153 + tickPixelInterval: 150
154 + },
155 + yAxis: {
156 + title: {
157 + text: "Value"
158 + },
159 + plotLines: [
160 + {
161 + value: 0,
162 + width: 1,
163 + color: "#808080"
164 + }
165 + ]
166 + },
167 + tooltip: {
168 + headerFormat: "<b>{series.name}</b><br/>",
169 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
170 + },
171 + legend: {
172 + //enabled: false
173 + layout: "vertical",
174 + align: "left",
175 + verticalAlign: "top",
176 + x: 120,
177 + y: 70,
178 + floating: true,
179 + borderWidth: 1,
180 + backgroundColor:
181 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
182 + "#FFFFFF"
183 + },
184 + exporting: {
185 + enabled: false
186 + },
187 + series: [
188 + {
189 + name: "사망률(%)",
190 + data: (function() {
191 + // generate an array of random data
192 + var data = [],
193 + time = new Date().getTime(),
194 + i;
195 +
196 + for (i = -19; i <= 0; i += 1) {
197 + data.push({
198 + x: time + i * 3000,
199 + y: 0
200 + });
201 + }
202 + return data;
203 + })()
204 + }
205 + ]
206 + });
207 +
208 + Highcharts.chart("container3", {
209 + chart: {
210 + type: "spline",
211 + animation: Highcharts.svg, // don't animate in old IE
212 + marginRight: 10,
213 + events: {
214 + load: function() {
215 + // set up the updating of the chart each second
216 + var series = this.series[0];
217 + setInterval(function() {
218 + var x = new Date().getTime(), // 현재 시간
219 + y = Math.random(); //
220 + series.addPoint([x, y], true, true);
221 + }, 3000); //1000=1초
222 + }
223 + }
224 + },
225 +
226 + time: {
227 + useUTC: false
228 + },
229 +
230 + title: {
231 + text: "실시간 사망률"
232 + },
233 + xAxis: {
234 + type: "datetime",
235 + tickPixelInterval: 150
236 + },
237 + yAxis: {
238 + title: {
239 + text: "Value"
240 + },
241 + plotLines: [
242 + {
243 + value: 0,
244 + width: 1,
245 + color: "#808080"
246 + }
247 + ]
248 + },
249 + tooltip: {
250 + headerFormat: "<b>{series.name}</b><br/>",
251 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
252 + },
253 + legend: {
254 + //enabled: false
255 + layout: "vertical",
256 + align: "left",
257 + verticalAlign: "top",
258 + x: 120,
259 + y: 70,
260 + floating: true,
261 + borderWidth: 1,
262 + backgroundColor:
263 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
264 + "#FFFFFF"
265 + },
266 + exporting: {
267 + enabled: false
268 + },
269 + series: [
270 + {
271 + name: "사망률(%)",
272 + data: (function() {
273 + // generate an array of random data
274 + var data = [],
275 + time = new Date().getTime(),
276 + i;
277 +
278 + for (i = -19; i <= 0; i += 1) {
279 + data.push({
280 + x: time + i * 3000,
281 + y: 0
282 + });
283 + }
284 + return data;
285 + })()
286 + }
287 + ]
288 + });
289 +
290 + Highcharts.chart("container4", {
291 + chart: {
292 + type: "spline",
293 + animation: Highcharts.svg, // don't animate in old IE
294 + marginRight: 10,
295 + events: {
296 + load: function() {
297 + // set up the updating of the chart each second
298 + var series = this.series[0];
299 + setInterval(function() {
300 + var x = new Date().getTime(), // 현재 시간
301 + y = Math.random(); //
302 + series.addPoint([x, y], true, true);
303 + }, 3000); //1000=1초
304 + }
305 + }
306 + },
307 +
308 + time: {
309 + useUTC: false
310 + },
311 +
312 + title: {
313 + text: "실시간 사망률"
314 + },
315 + xAxis: {
316 + type: "datetime",
317 + tickPixelInterval: 150
318 + },
319 + yAxis: {
320 + title: {
321 + text: "Value"
322 + },
323 + plotLines: [
324 + {
325 + value: 0,
326 + width: 1,
327 + color: "#808080"
328 + }
329 + ]
330 + },
331 + tooltip: {
332 + headerFormat: "<b>{series.name}</b><br/>",
333 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
334 + },
335 + legend: {
336 + //enabled: false
337 + layout: "vertical",
338 + align: "left",
339 + verticalAlign: "top",
340 + x: 120,
341 + y: 70,
342 + floating: true,
343 + borderWidth: 1,
344 + backgroundColor:
345 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
346 + "#FFFFFF"
347 + },
348 + exporting: {
349 + enabled: false
350 + },
351 + series: [
352 + {
353 + name: "사망률(%)",
354 + data: (function() {
355 + // generate an array of random data
356 + var data = [],
357 + time = new Date().getTime(),
358 + i;
359 +
360 + for (i = -19; i <= 0; i += 1) {
361 + data.push({
362 + x: time + i * 3000,
363 + y: 0
364 + });
365 + }
366 + return data;
367 + })()
368 + }
369 + ]
370 + });
371 +
372 + Highcharts.chart("container1", {
373 + chart: {
374 + type: "areaspline",
375 + animation: Highcharts.svg, // don't animate in old IE
376 + marginRight: 10,
377 + events: {
378 + load: function() {
379 + // set up the updating of the chart each second
380 + var series = this.series[0];
381 + setInterval(function() {
382 + var x = new Date().getTime(), // 현재 시간
383 + y = Math.random(); //
384 + series.addPoint([x, y], true, true);
385 + }, 3000); //1000=1초
386 + }
387 + }
388 + },
389 +
390 + time: {
391 + useUTC: false
392 + },
393 +
394 + title: {
395 + text: "실시간 사망률"
396 + },
397 + xAxis: {
398 + type: "datetime",
399 + tickPixelInterval: 150
400 + },
401 + yAxis: {
402 + title: {
403 + text: "Value"
404 + },
405 + plotLines: [
406 + {
407 + value: 0,
408 + width: 1,
409 + color: "#808080"
410 + }
411 + ]
412 + },
413 + tooltip: {
414 + headerFormat: "<b>{series.name}</b><br/>",
415 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
416 + },
417 + legend: {
418 + //enabled: false
419 + layout: "vertical",
420 + align: "left",
421 + verticalAlign: "top",
422 + x: 120,
423 + y: 70,
424 + floating: true,
425 + borderWidth: 1,
426 + backgroundColor:
427 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
428 + "#FFFFFF"
429 + },
430 + exporting: {
431 + enabled: false
432 + },
433 + series: [
434 + {
435 + name: "사망률(%)",
436 + data: (function() {
437 + // generate an array of random data
438 + var data = [],
439 + time = new Date().getTime(),
440 + i;
441 +
442 + for (i = -19; i <= 0; i += 1) {
443 + data.push({
444 + x: time + i * 3000,
445 + y: 0
446 + });
447 + }
448 + return data;
449 + })()
450 + }
451 + ]
452 + });
453 + </script>
454 + </body>
455 +</html>
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 + <meta name="viewport" content="width=device-width, initial-scale=1" />
6 + <title>Highcharts Example</title>
7 +
8 + <style type="text/css"></style>
9 + </head>
10 + <body>
11 + <script src="../../code/highcharts.js"></script>
12 + <script src="../../code/modules/exporting.js"></script>
13 + <script src="../../code/modules/export-data.js"></script>
14 +
15 + <div
16 + id="container"
17 + style="min-width: 310px; height: 400px; margin: 0 auto"
18 + ></div>
19 +
20 + <script type="text/javascript">
21 + var death = [3, 4, 3, 5, 4, 10, 12,1,2,3];
22 + var temp = [1, 3, 10, 3, 11, 5, 8,4,5,6];
23 +
24 + var chart = Highcharts.chart("container", {
25 + chart: {
26 + type: "areaspline"
27 + },
28 + title: {
29 + text: "실시간 사망률"
30 + },
31 + legend: {
32 + layout: "vertical",
33 + align: "left",
34 + verticalAlign: "top",
35 + x: 120,
36 + y: 70,
37 + floating: true,
38 + borderWidth: 1,
39 + backgroundColor:
40 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
41 + "#FFFFFF"
42 + },
43 + xAxis: {
44 + categories: [
45 + "Monday",
46 + "Tuesday",
47 + "Wednesday",
48 + "Thursday",
49 + "Friday",
50 + "Saturday",
51 + "Sunday",
52 + "Sunday",
53 + "Sunday",
54 + "Sunday"
55 + ],
56 + plotBands: [
57 + {
58 + // 색칠되는 구간
59 + from: 7.5,
60 + to: 10.5,
61 + color: "rgba(68, 170, 213, .2)"
62 + }
63 + ]
64 + },
65 + yAxis: {
66 + title: {
67 + text: "Fruit units"
68 + }
69 + },
70 + tooltip: {
71 + shared: true,
72 + valueSuffix: " %", //point mouseover 단위
73 + },
74 + credits: {
75 + enabled: false
76 + },
77 + plotOptions: {
78 + areaspline: {
79 + fillOpacity: 0.5
80 + }
81 + },
82 + series: [
83 + {
84 + name: "사망률(%)",
85 + data: []
86 + },
87 + {
88 + name: "기온('C)",
89 + data: []
90 + }
91 + ]
92 + });
93 +
94 + death.shift();
95 + temp.shift();
96 +
97 + death.push(11);
98 + temp.push(3);
99 +
100 + chart.series[0].setData(death);
101 + chart.series[1].setData(temp);
102 +
103 + </script>
104 + </body>
105 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 + <meta name="viewport" content="width=device-width, initial-scale=1" />
6 + <title>Highcharts Example</title>
7 +
8 + <style type="text/css"></style>
9 + </head>
10 + <body>
11 + <script src="../../code/highcharts.js"></script>
12 + <script src="../../code/modules/exporting.js"></script>
13 + <script src="../../code/modules/export-data.js"></script>
14 +
15 + <div
16 + id="container"
17 + style="min-width: 310px; height: 400px; margin: 0 auto"
18 + ></div>
19 +
20 + <script type="text/javascript">
21 +
22 +Highcharts.chart('container', {
23 + chart: {
24 + zoomType: 'xy'
25 + },
26 + title: {
27 + text: 'Average Monthly Temperature and Rainfall in Tokyo'
28 + },
29 + subtitle: {
30 + text: 'Source: WorldClimate.com'
31 + },
32 + xAxis: [{
33 + categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
34 + 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
35 + crosshair: true
36 + }],
37 + yAxis: [{ // Primary yAxis
38 + labels: {
39 + format: '{value}°C',
40 + style: {
41 + color: Highcharts.getOptions().colors[1]
42 + }
43 + },
44 + title: {
45 + text: 'Temperature',
46 + style: {
47 + color: Highcharts.getOptions().colors[1]
48 + }
49 + }
50 + }, { // Secondary yAxis
51 + title: {
52 + text: 'Rainfall',
53 + style: {
54 + color: Highcharts.getOptions().colors[0]
55 + }
56 + },
57 + labels: {
58 + format: '{value} mm',
59 + style: {
60 + color: Highcharts.getOptions().colors[0]
61 + }
62 + },
63 + opposite: true
64 + }],
65 + tooltip: {
66 + shared: true
67 + },
68 + legend: {
69 + layout: 'vertical',
70 + align: 'left',
71 + x: 120,
72 + verticalAlign: 'top',
73 + y: 100,
74 + floating: true,
75 + backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)'
76 + },
77 + series: [{
78 + name: 'Rainfall',
79 + type: 'areaspline',
80 + yAxis: 1,
81 + data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
82 + tooltip: {
83 + valueSuffix: ' mm'
84 + }
85 +
86 + }, {
87 + name: 'Temperature',
88 + type: 'spline',
89 + data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
90 + tooltip: {
91 + valueSuffix: '°C'
92 + }
93 + }]
94 +});
95 + </script>
96 + </body>
97 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
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 +
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 + 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>
25 + <script src="../code/highcharts.js"></script>
26 + <script src="../code/modules/exporting.js"></script>
27 + <script src="../code/modules/export-data.js"></script>
28 +
29 + <div id="container1" style="width:1260px; height: 400px; margin: 0 auto;"></div>
30 +
31 + <div style="width:1275px; margin:0 auto;">
32 + <div style="display: inline-block;">
33 + <div id="container2" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
34 + </div>
35 + <div style="display: inline-block;">
36 + <div id="container3" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
37 + </div>
38 +
39 + <div style="display: inline-block;">
40 + <div id="container4" style="width:400px; height: 300px; padding:0; margin-left:0px;"></div>
41 + </div>
42 + </div>
43 +
44 + <!-- 첫번째 그래프 -->
45 + <script type="text/javascript">
46 + var chart1 = Highcharts.chart("container1", {
47 + chart: {
48 + type: "spline",
49 + animation: Highcharts.svg, // don't animate in old IE
50 + marginRight: 10,
51 + events: {
52 + load: function () {
53 + // set up the updating of the chart each second
54 + var series = this.series[0];
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
60 + }
61 + },
62 +
63 + backgroundColor: "rgba(255, 255, 255, 0.0)"
64 + },
65 +
66 + time: {
67 + useUTC: false
68 + },
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: {
89 + title: {
90 + text: "Value",
91 + style: {
92 + color: "white"
93 + }
94 + },
95 +
96 + plotLines: [
97 + {
98 + value: 0,
99 + width: 1,
100 + color: "#808080"
101 + }
102 + ],
103 + labels: {
104 + style: {
105 + color: "white"
106 + }
107 + }
108 +
109 + },
110 + tooltip: {
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 + },
130 +
131 +plotOptions: {
132 + series: {
133 + marker: {
134 + radius: 6
135 + }
136 + }
137 + },
138 +
139 + series: [
140 + {
141 + name: "사망률",
142 + data: (function () {
143 + // generate an array of random data
144 + var data = [],
145 + time = new Date().getTime(),
146 + i;
147 +
148 + for (i = -9; i <= 0; i += 1) {
149 + data.push({
150 + x: time + i * 1000,
151 + y: 0,
152 + });
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 + }
181 + },
182 +
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 + }
215 + },
216 + plotLines: [
217 + {
218 + value: 0,
219 + width: 1,
220 + color: "#808080"
221 + }
222 + ],
223 + labels: {
224 + style: {
225 + color: "white"
226 + }
227 + }
228 +
229 + },
230 + tooltip: {
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;
258 +
259 + for (i = -19; i <= 0; i += 1) {
260 + data.push({
261 + x: time + i * 3000,
262 + y: 0
263 + });
264 + }
265 + return data;
266 + })(),
267 +
268 + color: "#FFE08C"
269 + }
270 + ]
271 + });
272 + </script>
273 +
274 + <!-- 세번째 그래프 -->
275 + <script type="text/javascript">
276 + Highcharts.chart("container3", {
277 + chart: {
278 + type: "spline",
279 + animation: Highcharts.svg, // don't animate in old IE
280 + marginRight: 10,
281 + events: {
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 + }
291 + },
292 + backgroundColor: "rgba(255, 255, 255, 0.0)"
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 + }
323 + },
324 + plotLines: [
325 + {
326 + value: 0,
327 + width: 1,
328 + color: "#808080"
329 + }
330 + ],
331 + labels: {
332 + style: {
333 + color: "white"
334 + }
335 + }
336 +
337 + },
338 + tooltip: {
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;
366 +
367 + for (i = -19; i <= 0; i += 1) {
368 + data.push({
369 + x: time + i * 3000,
370 + y: 0
371 + });
372 + }
373 + return data;
374 + })(),
375 +
376 + color: "#FFE08C"
377 + }
378 + ]
379 + });
380 + </script>
381 +
382 + <!-- 네번째 그래프 -->
383 + <script type="text/javascript">
384 + Highcharts.chart("container4", {
385 + chart: {
386 + type: "spline",
387 + animation: Highcharts.svg, // don't animate in old IE
388 + marginRight: 10,
389 + events: {
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 + }
399 + },
400 + backgroundColor: "rgba(255, 255, 255, 0.0)"
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 + }
431 + },
432 + plotLines: [
433 + {
434 + value: 0,
435 + width: 1,
436 + color: "#808080"
437 + }
438 + ],
439 + labels: {
440 + style: {
441 + color: "white"
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
1 +<!DOCTYPE <!DOCTYPE html>
2 +<html>
3 +
4 +<head>
5 + <meta charset="utf-8" />
6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 + <title>Page Title</title>
8 +
9 +<!-- font -->
10 +<link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet">
11 +<link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet">
12 +
13 + <meta name="viewport" content="width=device-width, initial-scale=1">
14 + <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
15 + <script src="main.js"></script>
16 +
17 + <!-- 합쳐지고 최소화된 최신 CSS -->
18 + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
19 +
20 + <!-- 부가적인 테마 -->
21 + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
22 +
23 + <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
24 + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
25 +
26 + <style type="text/css">
27 + body {
28 + /* background-image: url('background.jpg');
29 + background-repeat: no-repeat;
30 + background-size: cover; */
31 + /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */
32 + }
33 +
34 + h1 {
35 + color: white;
36 + font-family: 'Nanum Brush Script', cursive;
37 + }
38 +
39 + label {
40 + color: white;
41 + font-size: 20px;
42 + font-family: 'Yeon Sung', cursive;
43 + }
44 + #banner {
45 + position: absolute;
46 + top: 0;
47 + width: 100%;
48 + }
49 + #footer {
50 + position: absolute;
51 + bottom: 0;
52 + width: 100%;
53 + height: 50px;
54 + text-align: center;
55 + font-family: 'Yeon Sung', cursive;
56 + color:white;
57 + }
58 + </style>
59 +
60 +</head>
61 +
62 +<body>
63 + <img src="./background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
64 + <div id="banner">
65 + <div style="width:100%; text-align: center; padding-top:170px;">
66 + <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1>
67 + </div>
68 + <br><br><br>
69 + <div style="width:100%; text-align: center;">
70 + <form action="/starting" method="post">
71 + <div class="form-inline">
72 + <label>이름</label>
73 + <input type="text" name="name" class="form-control" placeholder="김철수" style="width:200px;">
74 + &nbsp&nbsp&nbsp&nbsp
75 + <label>생년월일</label>
76 + <input type="text" name="birth" class="form-control" placeholder="971009" style="width:200px;">
77 + <br><br><br>
78 + <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;">
79 + </div>
80 + </form>
81 + </div>
82 +
83 + </div>
84 +
85 + <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div>
86 +</body>
87 +
88 +</html>
...\ No newline at end of file ...\ No newline at end of file