<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=chrome">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
text-align: center;
}
</style>
<body>
<h3>한국인 MBTI 비율</h3>
<button id="btn">차트 보기</button>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"></script>
<script>
document.getElementById("btn").addEventListener('click', loadDoc);
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//const data = this.responseText;
mbtiData = JSON.parse(this.responseText);
console.log(mbtiData);
google.charts.load("current", {
packages : [ "corechart" ]
});
google.charts.setOnLoadCallback(drawChart);
}
};
xhttp.open("GET", "dataRes.jsp");
xhttp.send();
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
[ 'MBTI', 'Korean MBTI' ],
[ 'ISTJ', mbtiData.ISTJ ],
[ 'ESTJ', mbtiData.ESTJ ],
[ 'ISTP', mbtiData.ISTP ],
[ 'ISFJ', mbtiData.ISFJ ],
[ 'ISFP', mbtiData.ISFP ],
[ 'ESTP', mbtiData.ESTP ],
[ 'ESFJ', mbtiData.ESFJ ],
[ 'ESFP', mbtiData.ESFP ],
[ 'INTJ', mbtiData.INTJ ],
[ 'ENFP', mbtiData.ENFP ],
[ 'INFP', mbtiData.INFP ],
[ 'INTP', mbtiData.INTP ],
[ 'ENTJ', mbtiData.ENTJ ],
[ 'ENTP', mbtiData.ENTP ],
[ 'INFJ', mbtiData.INFJ ],
[ 'ENFJ', mbtiData.ENFJ ] ]);
var options = {
title : 'Korean MBTI',
is3D : true,
};
var chart = new google.visualization.PieChart(document
.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</body>
</html>
<%@ page language="java" contentType="text/plain; charset=utf-8"
pageEncoding="utf-8"%>
{
"ISTJ": 24,
"ESTJ": 15,
"ISTP": 9,
"ISFJ": 8,
"ISFP": 7,
"ESTP": 6,
"ESFJ": 5,
"ESFP": 5,
"INTJ": 4,
"ENFP": 4,
"INFP": 3,
"INTP": 3,
"ENTJ": 2,
"ENTP": 2,
"INFJ": 2,
"ENFJ": 1
}
