๐ก ๊ตฌ๊ธ ๊ฐ๋ฐ์์ผํฐ ์ฐธ๊ณ ํ๋ฌ ๊ฐ๊ธฐ
# DB์ ์กด์ฌํ๋ ๋ฐ์ดํฐ๋ฅผ ํ๋ฉด๋จ์ ๋ฟ๋ ค์ฃผ๋ ๋ฐฉ๋ฒ
1) Controller > DB์์ ๊ฐ์ ธ์จ ๊ฐ์ ๊ฐ๊ณตํ์ฌ ๋ทฐ๋จ์ ์ ๋ฌ
@RequestMapping("/statsUser.do")
public String statsUser(Model model) throws Exception{
System.out.println("/statsUser.do");
Map<String, Object> map = userService.getQuitUserList();
//map์ ๋๊ฐ๊ฐ ๋ด๊ฒจ์ ธ ์์
//List<QuitUser> user
//Map<String, Integer> reason
Map<String, Integer> reason = (Map<String, Integer>) map.get("reason");
//๋ฐ์ดํฐ ๊ฐ๊ณต ํ ์ ๋ฌ
String result = "";
Set<String> reasonKeys = reason.keySet();
for(String key : reasonKeys) {
if(result!="") {
result += ",";
}
result += "['"+key+"', "+reason.get(key)+"]";
}
model.addAttribute("result", result);
return "forward:/user/statsUser.jsp";
}
2) View > ํค๋๋ถ๋ถ์ ์๋ฐ์คํฌ๋ฆฝํธํจ์๋ฅผ ์ฝ์ ํ๊ณ
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Reason', 'Count'],
${result}
]);
var options = {
title: 'ํํด ํต๊ณ'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
3) View > ๋ฐ๋๋ถ๋ถ์ ๋ฟ๋ ค์ค ์ฐจํธํญ๋ชฉ์ ์จ์ฃผ๋ฉด ๋!
<div id="piechart" style="width: 900px; height: 500px;"></div>โ
๋ฐ์ํ
'Frontend > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
ํ์ด์ง ์ต์๋จ์ผ๋ก ์ด๋์ํค๋ ์คํฌ๋ฆฝํธ (2) | 2018.07.13 |
---|---|
ํ์ฌ์์คํ ๋ ์ง์ ์๊ฐ ๊ตฌํ๋ ์๋ฐ์คํฌ๋ฆฝํธ (0) | 2018.07.10 |
์์ด์ฝ์ ํ๋ฉด์ ๊ณ ์ ์ํค๊ธฐ (0) | 2018.07.02 |
[JavaScript] DB๋ฐ์ดํฐ ๊ตฌ๊ธ์ฐจํธ ํ์ฉํ์ฌ ๊ทธ๋ํํ ์ํค๊ธฐ (0) | 2018.05.08 |
์ํฐํค ๋๋ฅด๋ฉด ํจ์์คํ๋๊ฒ ํ๊ธฐ (0) | 2018.05.04 |
์์์๋์ฐ๊ฐ ๋ซํ์ง๋ฉด์ ๋ถ๋ชจ์๋์ฐ ํ์ด์ง ์ด๋์ํค๋ ๋ฐฉ๋ฒ (0) | 2018.05.02 |
๋๊ธ0