Chart.js (1) 기본

차트 출력을 하는데에 있어서 구글 차트를 썼지만 그보다 더 편한 것이

Chart.js가 있다. 이는 오픈소스로 사용이 가능하며, 사용법도 간단하다. 우선은 여기서 출력만 하고

jquery 의 ajax를 이용한 db연동은 추후에 준비하도록 하겠다.

 

 

# 필수 스크립트

<script src="https://www.chartjs.org/dist/master/chart.min.js"></script>

 

 

 

 

 

# chart의 속성들

 

type : 기본적으로 bar, pie, line, radar를 많이 사용한다.

data : 실질적으로 ajax의 값을 가져와 연결해야하는 부분이다.

 var Data= {
            type:"bar", /*chart.js는 mixed 차트를 지원하는데, line과 bar만 섞을 수 있음*/
            label: '',    /*x축의 이름*/
            data: [11, 22, 33, 44, 55, 66], /*x축에 들어가는 데이터와 속성옵션*/
            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
 };

 

교수님이 주신 예제

 

 

Chart.js의 종류와 예제

Information | Chart.js