[Chart.js] Chart.js

Posted by 신희준 on January 4, 2018

2018 - 01 - 04 (목)


chart.js


현재 진행중인 어드민 페이지의 대시보드 작업을 위해 Chart.js 을 활용해 보고자 한다. https://github.com/chartjs 에서 Chart.js 오픈소스 코드를 활용하여 해당 프로젝트에 적용하고자 한다.

  • Chart.js 튜토리얼 : https://github.com/cdnjs/tutorials
  • Chart.js 따라하기 : http://www.chartjs.org/docs/latest/

  • chart.js CDN
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
  • Chart.js download : https://www.jsdelivr.com/package/npm/chart.js?path=dist


chart.js + Spring

  • 응용하여 스프링과 연동을해보았다. 예제로 현재 프로젝트 중인 데이터베이스에서 성별 회원 수를 가져올 것이다.(스프링과 연동하여)

JSP


<script>
var ctx = document.getElementById("logChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["남자 회원", "여자 회원"],
        datasets: [{


            data: ['${menCount}', '${womenCount}'], //컨트롤러에서 모델로 받아온다.
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)'

            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)'

            ],
            borderWidth: 1
        }
        ]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>


Controller

@Controller
@RequestMapping("/admin")
public class AdminController {

	@Inject
	private UserService service;

	private static final Logger logger = LoggerFactory.getLogger(HomeController.class);
  @RequestMapping(value = "", method = RequestMethod.GET)
  	public String home(Locale locale, Model model)throws Exception {


  		int womenCount = service.getWomenCount();
  		int menCount = service.getMenCount();

  		model.addAttribute("menCount", menCount);
  		model.addAttribute("womenCount", womenCount);

  		return "/admin/index";

  	}
}

Mapper

<select id = "getWomenCount" resultType="int">
select count(*) from almom.user where user_sex = 0;

</select>
<select id = "getMenCount" resultType="int">
select count(*) from almom.user where user_sex = 1;
</select>
  • 다음같은 결과를 얻는다.

Post Sample Image