조민지 / 2018_2_project

Go to a project
Toggle navigation Toggle navigation pinning
조민지
9ca1929b 2 parents 75bb7f58 34471c48

Merge branch 'chart' into 'developing' 

Chart



See merge request !5
Inline Side-by-side
Showing 5 changed files with 99 additions and 58 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 -
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 }, 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 },
...@@ -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>
......