๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Frontend/JavaScript

[JavaScript] DB๋ฐ์ดํ„ฐ ๊ตฌ๊ธ€์ฐจํŠธ ํ™œ์šฉํ•˜์—ฌ ๊ทธ๋ž˜ํ”„ํ™” ์‹œํ‚ค๊ธฐ

by ์ง€๊ตฌ 2018. 5. 8.

๐Ÿ’ก ๊ตฌ๊ธ€ ๊ฐœ๋ฐœ์ž์„ผํ„ฐ ์ฐธ๊ณ ํ•˜๋Ÿฌ ๊ฐ€๊ธฐ

 

# 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>โ€‹

 

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€0