황지민 / Corona_Dust

Go to a project
Toggle navigation Toggle navigation pinning
jimin
90565746 1 parent 7e69c19a

ejs폴더

Inline Side-by-side
Showing 1 changed file with 102 additions and 0 deletions
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 +<meta charset="UTF-8">
5 +<title>Corona Dust</title>
6 +<link rel="icon" href = "dust_icon.jpg">
7 +<link rel="stylesheet" href="css/style.css">
8 +<script src="https://code.highcharts.com/highcharts.js"></script>
9 +<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
10 +
11 +<script language="javascript">
12 + var Feb_Dust_2020 = <%=Feb_Dust_2020%>;
13 + var Mar_Dust_2020 = <%=Mar_Dust_2020%>;
14 + var April_Dust_2020 = <%=April_Dust_2020%>;
15 + var May_Dust_2020 = <%=May_Dust_2020%>;
16 + var June_Dust_2020 = <%=June_Dust_2020%>;
17 + var Feb_Dust_2019 = <%=Feb_Dust_2019%>;
18 + var Mar_Dust_2019 = <%=Mar_Dust_2019%>;
19 + var April_Dust_2019 = <%=April_Dust_2019%>;
20 + var May_Dust_2019 = <%=May_Dust_2019%>;
21 + var June_Dust_2019 = <%=June_Dust_2019%>;
22 + var Feb_Dust_2018 = <%=Feb_Dust_2018%>;
23 + var Mar_Dust_2018 = <%=Mar_Dust_2018%>;
24 + var April_Dust_2018 = <%=April_Dust_2018%>;
25 + var May_Dust_2018 = <%=May_Dust_2018%>;
26 + var June_Dust_2018 = <%=June_Dust_2018%>;
27 + $(document).ready(function() {
28 + var chart = Highcharts.chart('container', {
29 + chart: {
30 + type: 'line'
31 + },
32 + title: {
33 + text: '[2018 - 2020] 2월 ~ 6월 미세먼지 비교'
34 + },
35 + subtitle: {
36 + text: 'Source: <a href="https://data.seoul.go.kr/">서울 열린데이터 광장</a>'
37 + },
38 + xAxis: {
39 + categories: ['2월', '3월', '4월', '5월', '6월'],
40 + title: {
41 + text: null
42 + }
43 + },
44 + yAxis: {
45 + min: 0,
46 + title: {
47 + text: '미세먼지(PM10)',
48 + align: 'high'
49 + },
50 + labels: {
51 + overflow: 'justify'
52 + }
53 + },
54 + tooltip: {
55 + valueSuffix: ' [PM10]'
56 + },
57 + plotOptions: {
58 + bar: {
59 + dataLabels: {
60 + enabled: true
61 + }
62 + }
63 + },
64 + legend: {
65 + layout: 'vertical',
66 + align: 'right',
67 + verticalAlign: 'top',
68 + x: -40,
69 + y: 80,
70 + floating: true,
71 + borderWidth: 1,
72 + backgroundColor:
73 + Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
74 + shadow: true
75 + },
76 + credits: {
77 + enabled: false
78 + },
79 + series: [{
80 + name: '2020년',
81 + data: [Feb_Dust_2020,Mar_Dust_2020,April_Dust_2020,May_Dust_2020,June_Dust_2020]
82 + }, {
83 + name: '2019년',
84 + data: [Feb_Dust_2019,Mar_Dust_2019,April_Dust_2019,May_Dust_2019,June_Dust_2019]
85 + }, {
86 + name: '2018년',
87 + data: [Feb_Dust_2018,Mar_Dust_2018,April_Dust_2018,May_Dust_2018,June_Dust_2018]
88 + }]
89 + });
90 +
91 +});
92 +
93 +</script>
94 +</head>
95 +<body>
96 + <div class="center">
97 + <img src= "dust_icon.jpg" width = 300, height = 300/>
98 + </div>
99 + <div id="container"></div>
100 +</body>
101 +
102 +</html>