2019-1-OpenSourceSW / Probability Death

Go to a project
Toggle navigation Toggle navigation pinning
조민지
7c8168b3 1 parent dc48e761

차트에 push/pop 가능

Expand all
Inline Side-by-side
Showing 3 changed files with 55 additions and 39 deletions
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
1 -<!DOCTYPE HTML> 1 +<!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 - <meta name="viewport" content="width=device-width, initial-scale=1"> 5 + <meta name="viewport" content="width=device-width, initial-scale=1" />
6 <title>Highcharts Example</title> 6 <title>Highcharts Example</title>
7 7
8 - <style type="text/css"> 8 + <style type="text/css"></style>
9 -
10 - </style>
11 </head> 9 </head>
12 <body> 10 <body>
13 -<script src="../../code/highcharts.js"></script> 11 + <script src="../../code/highcharts.js"></script>
14 -<script src="../../code/modules/exporting.js"></script> 12 + <script src="../../code/modules/exporting.js"></script>
15 -<script src="../../code/modules/export-data.js"></script> 13 + <script src="../../code/modules/export-data.js"></script>
16 -
17 -<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
18 -
19 14
15 + <div
16 + id="container"
17 + style="min-width: 310px; height: 400px; margin: 0 auto"
18 + ></div>
20 19
21 <script type="text/javascript"> 20 <script type="text/javascript">
21 + var death = [3, 4, 3, 5, 4, 10, 12];
22 + var temp = [1, 3, 10, 3, 11, 5, 8];
22 23
23 -Highcharts.chart('container', { 24 + var chart = Highcharts.chart("container", {
24 chart: { 25 chart: {
25 - type: 'areaspline' 26 + type: "areaspline"
26 }, 27 },
27 title: { 28 title: {
28 - text: '실시간 사망률' 29 + text: "실시간 사망률"
29 }, 30 },
30 legend: { 31 legend: {
31 - layout: 'vertical', 32 + layout: "vertical",
32 - align: 'left', 33 + align: "left",
33 - verticalAlign: 'top', 34 + verticalAlign: "top",
34 x: 150, 35 x: 150,
35 y: 100, 36 y: 100,
36 floating: true, 37 floating: true,
37 borderWidth: 1, 38 borderWidth: 1,
38 - backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' 39 + backgroundColor:
40 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
41 + "#FFFFFF"
39 }, 42 },
40 xAxis: { 43 xAxis: {
41 categories: [ 44 categories: [
42 - 'Monday', 45 + "Monday",
43 - 'Tuesday', 46 + "Tuesday",
44 - 'Wednesday', 47 + "Wednesday",
45 - 'Thursday', 48 + "Thursday",
46 - 'Friday', 49 + "Friday",
47 - 'Saturday', 50 + "Saturday",
48 - 'Sunday' 51 + "Sunday"
49 ], 52 ],
50 - plotBands: [{ // visualize the weekend 53 + plotBands: [
54 + {
55 + // 색칠되는 구간
51 from: 4.5, 56 from: 4.5,
52 to: 6.5, 57 to: 6.5,
53 - color: 'rgba(68, 170, 213, .2)' 58 + color: "rgba(68, 170, 213, .2)"
54 - }] 59 + }
60 + ]
55 }, 61 },
56 yAxis: { 62 yAxis: {
57 title: { 63 title: {
58 - text: 'Fruit units' 64 + text: "Fruit units"
59 } 65 }
60 }, 66 },
61 tooltip: { 67 tooltip: {
62 - shared: true, 68 + shared: false,
63 - valueSuffix: ' units' 69 + valueSuffix: " %", //point mouseover 단위
64 }, 70 },
65 credits: { 71 credits: {
66 enabled: false 72 enabled: false
...@@ -70,14 +76,24 @@ Highcharts.chart('container', { ...@@ -70,14 +76,24 @@ Highcharts.chart('container', {
70 fillOpacity: 0.5 76 fillOpacity: 0.5
71 } 77 }
72 }, 78 },
73 - series: [{ 79 + series: [
74 - name: '사망률', 80 + {
81 + name: "사망률",
75 data: [3, 4, 3, 5, 4, 10, 12] 82 data: [3, 4, 3, 5, 4, 10, 12]
76 - }, { 83 + },
77 - name: '기온', 84 + {
78 - data: [1, 3, 4, 3, 3, 5, 4] 85 + name: "기온",
79 - }] 86 + data: [1, 3, 10, 3, 3, 5, 4]
80 -}); 87 + }
88 + ]
89 + });
90 +
91 + death.push(11);
92 + temp.push(3);
93 +
94 + chart.series[0].setData(death);
95 + chart.series[1].setData(temp);
96 +
81 </script> 97 </script>
82 </body> 98 </body>
83 </html> 99 </html>
...\ No newline at end of file ...\ No newline at end of file
......