티스토리 뷰

웹프로젝트

Chart.js 를 사용해 front 구성

Hilu 2019. 4. 28. 16:06

1) Thymeleaf 를 써서 Front 를 개발하려고 한다.

그런데 앞서 구성 했던 controller 코드에서 @RequestMappint 에 value 값과, return 값을 같이 같아서 아래와 같은 에러가 나왔고, 

이를 수정하기 위해서 다음과 같이 변경 하였다.

 

@RequestMapping(value = "/test")
public String tmpl(Model model){
model.addAttribute("id", 1);
model.addAttribute("name", "지용호");
model.addAttribute("nickname","지돌스타");
// model.addAttribute("photo", "images/test.jpg");
 return "test1";
}

 

2) Spring Boot 는 static 가 root 폴더가 된다고 한다.

참고 :  https://yonguri.tistory.com/entry/%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8-SpringBoot-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1-1-%EC%8B%9C%EC%9E%91

 

[스프링부트] SpringBoot 개발환경 구성 #1 - 시작!

SpringBoot로 인해 확실히 기존의 Spring기반 웹어플리케이션 프로젝트를 셋업하는데 좀 더 편하고 빠르게 할 수 있게 된 것 같다. 그 동안 많은 자바개발자들이 localhost로 'Hello, Java!' 를 한번 찍어보기 위..

yonguri.tistory.com

 

3) static 아래에 index.html 을 만들고 실행 접속하면.

4) 이제 chart.js 를 연결해서 데모를 해보자.

소스 코드

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
    <title>Title</title>
</head>
<body>
    <div style="width:800px">
        <canvas id="myChart"></canvas>
    </div>
    <script src="../js/main.js"></script>
</body>
</html>

 

 

막대그래프 데모

막대그래프 샘플 데이터

var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        maintainAspectRatio: true, // default value. false일 경우 포함된 div의 크기에 맞춰서 그려짐.
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

 

'웹프로젝트' 카테고리의 다른 글

기타 정리  (0) 2019.05.04
MongoDB query 작성 (JPA)  (0) 2019.05.02
MongoDB 와 Front-End 연결  (0) 2019.04.28
Front-End 차트 라이브러리 (무료)  (0) 2019.04.28
Spring Boot 로 웹프로젝트 구성하기 - 개발 환경 설정  (0) 2019.04.28
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함