-
Notifications
You must be signed in to change notification settings - Fork 1
/
step03_miniProject.html
172 lines (161 loc) · 7.25 KB
/
step03_miniProject.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#app{
width:100%;
height: 55px;
}
.bt{
width: 13.9%;
height: 100%;
background-color: black;
color: white;
font-size: 19px;
}
.bt:hover{
width: 13.9%;
height: 100%;
background-color: white;
color: black;
font-size: 19px;
}
</style>
</head>
<body>
<div id="app">
<button class="bt" v-on:click="drawChartOne('연령별')">연령별</button>
<button class="bt" v-on:click="drawChartOne('성별')">성별</button>
<button class="bt" v-on:click="drawChartOne('소득별')">소득별</button>
<button class="bt" v-on:click="drawChartOne('혼인상태별')">혼인상태별</button>
<button class="bt" v-on:click="drawChartOne('학력별')">학력별</button>
<button class="bt" v-on:click="drawChartOne('지역별')">지역별</button>
<button class="bt" v-on:click="drawChartOne('지역구별')">지역구별</button>
</div>
<div id="chart_div" style="width: 100%; height: 400px;"></div>
<div id="app2"></div>
<div id="container"></div>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-tag-cloud.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
new Vue ({
el : "#app",
methods : {
drawChartOne : function(subject){
axios.get("http://localhost:9200/concern1/_search?size=100&filter_path=hits.hits._source")
.then(function(resData) {
let dataKeys = []; // 구글차트 첫 행에 넣어줄 컬럼(키)
let dataArray = []; // 가공 전 resData에서 전체 데이터를 담을 배열
let btn = document.getElementById("app2"); // 소분류 버튼 생성할 곳
btn.innerHTML = null; // 소분류 버튼 초기화
document.getElementById("container").innerHTML = "<span></span>";
array= [];
let firstLength = Object.keys(resData.data.hits.hits[0]._source).length;
let secondLength = resData.data.hits.hits.length;
// 최초 키(컬럼) 셋팅
for(let j = 0; j < firstLength; j++){
dataKeys.push(Object.keys(resData.data.hits.hits[0]._source)[j]);
}
// 전체 데이터 배열에 담기
for(let i = 0; i < secondLength; i++){
dataArray.push(Object.values(resData.data.hits.hits[i]._source));
}
// 배열에 필요없는 부분 지우기
for(let k = 0; k < dataArray.length; k++){
dataArray[k].splice(0,1);
}
// 전체 배열 데이터에서 대분류에 맞는 배열만 담기
for(let l = 0; l < dataArray.length; l++ ){
if(dataArray[l][0].includes(subject)){
array.push(dataArray[l]);
}
}
// 배열에서 필요 없는 부분 지우기 ( 년도, 합계 부분)
for(let m = 0; m < array.length; m++){
array[m].splice(0,1);
array[m].splice(1,1);
}
// 소분류별 워드 클라우드 적용하기위한 전용 버튼 생성
for(let i = 0; i < array.length; i++){
btn.innerHTML += "<button class=\"bt\" onclick=\"dataWord('" + array[i][0] + "')\">" + array[i][0] + "</button>"
}
// 데이터상 "-"값을 0으로 치환
for(let z = 0; z < array.length; z++){
for(let x = 0; x < array[z].length; x++){
if(array[z][x] == "-"){
array[z][x] = 0;
}
}
}
// 키값중에 필요없는 값 지우기 ( 년도, 대분류, 소분류 )
dataKeys.splice(0,2);
dataKeys.splice(1,1);
// 구글차트 데이터 형식에 맞게 키값 제일 첫 인덱스로 셋팅
array.unshift(dataKeys);
// 차트 데이터 폼에 맞게 string타입들 number타입으로 변경
for(let a = 1; a < array.length; a++){
for(let b = 1; b < array[0].length; b++){
array[a][b] = Number(array[a][b]);
}
}
drawVisualization(array,subject);
}).catch(function(error) {
console.log(" 에러낫어여", error)
});
}
}
});
function dataWord(secondSbj){
anychart.onDocumentReady(function() {
var data = [];
for(let i = 0; i < array[0].length-1; i++){
data.push({"x": "", "value": 0});
}
let number = 0;
for(let b = 1; b < array.length; b++){
if(secondSbj == array[b][0]){
number = b;
}
}
for(let a = 0; a < data.length; a++){
data[a].x = array[0][a+1];
data[a].value = array[number][a+1];
}
drawWord(data);
});
}
google.charts.load("current", {"packages":["corechart"]});
function drawVisualization(dataArray,subject) {
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
title : "개인별 고민거리 통계 (출처:서울특별시 스마트도시정책관 빅데이터담당관, 2014)",
vAxis: {title: "고민별 비율"},
hAxis: {title: subject},
seriesType: "bars",
};
var chart = new google.visualization.ComboChart(document.getElementById("chart_div"));
chart.draw(data, options);
}
function drawWord(data){
document.getElementById("container").innerHTML = "<span></span>";
var chart = anychart.tagCloud(data);
chart.angles([0])
chart.container(document.getElementById("container"));
chart.draw();
}
</script>
</body>
</html>