이정민 / OPproject

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

graph

Expand all
Inline Side-by-side
Showing 8 changed files with 290 additions and 0 deletions

205 KB

204 KB
This diff is collapsed. Click to expand it.
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
This diff is collapsed. Click to expand it.
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