2019-1-OpenSourceSW / Probability Death

Go to a project
Toggle navigation Toggle navigation pinning
조민지
b346d399 1 parent 0150776f

웹페이지 구조 완성

Expand all
Inline Side-by-side
Showing 4 changed files with 392 additions and 12 deletions
This diff is collapsed. Click to expand it.
...@@ -18,8 +18,8 @@ ...@@ -18,8 +18,8 @@
18 ></div> 18 ></div>
19 19
20 <script type="text/javascript"> 20 <script type="text/javascript">
21 - var death = [3, 4, 3, 5, 4, 10, 12]; 21 + var death = [3, 4, 3, 5, 4, 10, 12,1,2,3];
22 - var temp = [1, 3, 10, 3, 11, 5, 8]; 22 + var temp = [1, 3, 10, 3, 11, 5, 8,4,5,6];
23 23
24 var chart = Highcharts.chart("container", { 24 var chart = Highcharts.chart("container", {
25 chart: { 25 chart: {
...@@ -32,8 +32,8 @@ ...@@ -32,8 +32,8 @@
32 layout: "vertical", 32 layout: "vertical",
33 align: "left", 33 align: "left",
34 verticalAlign: "top", 34 verticalAlign: "top",
35 - x: 150, 35 + x: 120,
36 - y: 100, 36 + y: 70,
37 floating: true, 37 floating: true,
38 borderWidth: 1, 38 borderWidth: 1,
39 backgroundColor: 39 backgroundColor:
...@@ -48,13 +48,16 @@ ...@@ -48,13 +48,16 @@
48 "Thursday", 48 "Thursday",
49 "Friday", 49 "Friday",
50 "Saturday", 50 "Saturday",
51 + "Sunday",
52 + "Sunday",
53 + "Sunday",
51 "Sunday" 54 "Sunday"
52 ], 55 ],
53 plotBands: [ 56 plotBands: [
54 { 57 {
55 // 색칠되는 구간 58 // 색칠되는 구간
56 - from: 4.5, 59 + from: 7.5,
57 - to: 6.5, 60 + to: 10.5,
58 color: "rgba(68, 170, 213, .2)" 61 color: "rgba(68, 170, 213, .2)"
59 } 62 }
60 ] 63 ]
...@@ -65,7 +68,7 @@ ...@@ -65,7 +68,7 @@
65 } 68 }
66 }, 69 },
67 tooltip: { 70 tooltip: {
68 - shared: false, 71 + shared: true,
69 valueSuffix: " %", //point mouseover 단위 72 valueSuffix: " %", //point mouseover 단위
70 }, 73 },
71 credits: { 74 credits: {
...@@ -78,16 +81,19 @@ ...@@ -78,16 +81,19 @@
78 }, 81 },
79 series: [ 82 series: [
80 { 83 {
81 - name: "사망률", 84 + name: "사망률(%)",
82 - data: [3, 4, 3, 5, 4, 10, 12] 85 + data: []
83 }, 86 },
84 { 87 {
85 - name: "기온", 88 + name: "기온('C)",
86 - data: [1, 3, 10, 3, 3, 5, 4] 89 + data: []
87 } 90 }
88 ] 91 ]
89 }); 92 });
90 93
94 + death.shift();
95 + temp.shift();
96 +
91 death.push(11); 97 death.push(11);
92 temp.push(3); 98 temp.push(3);
93 99
......
...@@ -76,7 +76,7 @@ Highcharts.chart('container', { ...@@ -76,7 +76,7 @@ Highcharts.chart('container', {
76 }, 76 },
77 series: [{ 77 series: [{
78 name: 'Rainfall', 78 name: 'Rainfall',
79 - type: 'spline', 79 + type: 'areaspline',
80 yAxis: 1, 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], 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: { 82 tooltip: {
......
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 + }, 1000); //1000=1초 -> 1분=60000
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 * 1000,
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 + </script>
373 + </body>
374 +</html>