STAY POSITIVE!
[Spring Boot] Chartjs를 이용해 JSON데이터 그래프로 구현하기 (연습) 본문
궁극적으로 하고 싶은 것은 일간, 주간, 월간 단위의 매출 현황을 그래프로 구현하는 거였다. 그래서 우선 데이터를 그래프로 구현하는 연습부터 해보기로 했다. 구글링해보니 Chart.js를 많이 사용하고 있었다. 늘 하듯이 스프링 부트로 MyBatis를 이용할 것이다.
http://uashadow.tistory.com/9 <-이 포스팅이 굉장히 많은 도움이 되었다.
1. 연습용 프로젝트를 하나 만들어주고, mybatis 세팅까지 완료.
- pom.xml 에 gson 메이븐 라이브러리도 추가하기
<dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> <version>2.8.5</version> </dependency> |
2. 패키지, 클래스, 인터페이스 생성
- controller : IncomeController
- domain : IncomeVO
- mapper : IncomeMapper
- service : IncomeService(인터페이스), IncomeServiceImpl(클래스)
3. src/main/resources
- mapper 폴더 생성 : IncomeMapper.xml
- templates : dateIncome.html
(1) IncomeVO
@Data public class IncomeVO { private int dd; private int income; } |
import java.util.List; import java.util.Locale; import org.gorany.domain.IncomeVO; import org.gorany.service.IncomeService; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import com.google.gson.Gson; import lombok.Setter; import lombok.extern.java.Log; @Controller @Log public class IncomeController {
private static final Logger logger = LoggerFactory.getLogger(IncomeController.class); @Setter(onMethod_=@Autowired) private IncomeService service;
@RequestMapping(value = "dateIncome", method = RequestMethod.GET) public String dateIncome(Locale locale, Model model) { return "dateIncome"; }
@RequestMapping(value = "incomeList", method = RequestMethod.GET, produces="text/plain;charset=UTF-8") public @ResponseBody String incomeList(Locale locale, Model model) { Gson gson = new Gson(); List<IncomeVO> list = service.getIncome();
return gson.toJson(list); }
} |
(3) IncomeMapper.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.******.mapper.IncomeMapper">
<select id="getIncome" resultType="org.******.domain.IncomeVO"> select * from date_income </select>
</mapper> |
(4) IncomeMapper / IncomeService / IncomeServiceImpl
public interface IncomeMapper { public List<IncomeVO> getIncome();
} |
public interface IncomeService {
public List<IncomeVO> getIncome();
} |
@Service @Log public class IncomeServiceImpl implements IncomeService {
@Setter(onMethod_=@Autowired) private IncomeMapper mapper;
@Override public List<IncomeVO> getIncome() {
return mapper.getIncome(); } } |
그래프 구현 : dateIncome.html
- chart.js 와 jquery 사용할 준비
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <meta charset="utf-8"> <head> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script> </body> </html> |
- 그래프 띄울 <div> 만들기
<div style="width:60%"> <div> <canvas id="canvas" height="450" width="600"></canvas> </div> </div> |
- 자바스크립트로 구현
<script> var chartLabels = []; var chartData = []; $.getJSON("http://localhost:8080/incomeList", function(data){
$.each(data, function(inx, obj){ chartLabels.push(obj.dd); chartData.push(obj.income); }); createChart(); console.log("create Chart") }); var lineChartData = { labels : chartLabels, datasets : [ { label : "Date Income", fillColor : "rbga(151,187,205,0.2)", strokeColor : "rbga(151,187,205,1)", pointColor : "rbga(151,187,205,1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rbga(151,187,205,1)", data : chartData
} ] } function createChart(){ var ctx = document.getElementById("canvas").getContext("2d"); LineChartDemo = Chart.Line(ctx,{ data : lineChartData, options :{ scales : { yAxes : [{ ticks :{ beginAtZero : true } }] } } }) } </script> |
구현된 화면
