[Chart.js] Chart.js로 차트 그리기

https://www.chartjs.org/

Chart.js

www.chartjs.org/

Chart.js | Open source HTML5 Charts for your website

4월 3주 차 프로젝트를

진행하던 중

매출 통계를 그래프로 그려야 하는

과제가 있었다.

 

사내에서는 amChart를 이용해

그래프를 그린다고 했었다.

amChart를 사용해본 적이 없고,

script에 대한 이해가 부족한 상태라

비교적 쉽게 그래프를 그릴 수 있는

Chart.js를 활용해 그래프를 그렸다.

 

 

 

 

chart js란?

Simple yet flexible JavaScript charting

for designers & developers

 

chart js 홈페이지에 들어가면

위와 같은 간단한 설명이 적혀있다.

 

간단하고 유연한 자바스크립트 차트라고 한다.

 

chart.js는 html의 canvas태그를 통해

차트를 그린다.

 

 

 

chart.js를 사용하러면

Git hub에서 다운을 받거나,

cdn을 사용해주면 된다.

 

1) chart js Git hub

github.com/chartjs/Chart.js

chartjs/Chart.js

2) CDN

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

다운을 받으면 src에 다운로드한 파일을 입력하고,

CDN을 사용할 경우 src에 위처럼 작성하면 된다.

 

 

그려지길 원하는 부분에

canvas를 선언해 주고

id를 선언해 준다.

<div style="width: 900px; height: 900px;">
	<!--차트가 그려질 부분-->
	<canvas id="myChart"></canvas>
</div>

 

그리고 body의 마지막 부분에서

다음과 같이 차트를 그리기 위한 코드를

작성해준다.

<script type="text/javascript">
            var context = document
                .getElementById('myChart')
                .getContext('2d');
            var myChart = new Chart(context, {
                type: 'bar', // 차트의 형태
                data: { // 차트에 들어갈 데이터
                    labels: [
                        //x 축
                        '1','2','3','4','5','6','7'
                    ],
                    datasets: [
                        { //데이터
                            label: 'test1', //차트 제목
                            fill: false, // line 형태일 때, 선 안쪽을 채우는지 안채우는지
                            data: [
                                21,19,25,20,23,26,25 //x축 label에 대응되는 데이터 값
                            ],
                            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 //경계선 굵기
                        }/* ,
                        {
                            label: 'test2',
                            fill: false,
                            data: [
                                8, 34, 12, 24
                            ],
                            backgroundColor: 'rgb(157, 109, 12)',
                            borderColor: 'rgb(157, 109, 12)'
                        } */
                    ]
                },
                options: {
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    beginAtZero: true
                                }
                            }
                        ]
                    }
                }
            });
        </script>
    </body>
</html>

 

 

var context = document
                .getElementById('myChart')
                .getContext('2d');
            var myChart = new Chart(context, { //chart내용 }

sciprt에서 myCahrt라는 id를 가진 태그를 찾고

getContext 속성을 통해 2d로 세팅한다.

chart() 함수를 통해서 원하는 데이터를 입력하고

차트를 그리게 된다.

 

type은 차트가 그려질

타입을 지정하는 것이다.

bar, line 등 여러 형태가 존재한다.

아래 링크를 통해

다양한 샘플을 참고하며

원하는 형태로 그려주면 되겠다.

www.chartjs.org/docs/latest/samples/

https://www.chartjs.org/docs/latest/samples/

위에 작성한 코드를 확인해보면

다음과 같은 결과를 얻을 수 있다.

type을 line으로 바꿔주면

bar 형식의 그래프에서

line의 형식으로 바뀌게 된다.

 

pie의 형식은 다음과 같다.