그래프(차트)를 그려보자 chart.js

웹에서 그래프를 그려보려고 하니, 전에 사용했던게 가물가물해서 찾아보았다. 생긴걸로 보아 사용했던게 아닌듯 하다...

http://www.chartjs.org

찾아보니 설치버전이 있는데... 잘 모르겠다. 그냥 파일로 적용해보기로 했다.

js파일은 사이트에 있는 링크 중에 아래 링크에서 받았다.

https://www.jsdelivr.com/package/npm/chart.js?path=dist

안에 있는 파일 중 Chart.min.js 파일만 올려서 테스트해보려고 한다.

Chart.min.js

chart.js-2.7.2.tgz

Chart.min.js

잘 출력되는지 샘플로 일단 테스트 해보자.

<canvas id="myChart" width="200px" height="100px"></canvas>

<script>

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {

    type: 'bar',

    data: {

        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],

        datasets: [{

            label: '그래프 테스트',

            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: {

        scales: {

            yAxes: [{

                ticks: {

                    beginAtZero:true

                }

            }]

        }

    }

});

</script>

<테스트 출력 결과>

잘 보이지만 좀 더 설정이 필요해보인다.

기본적인 구조는 canvas와 태그를 이용하고 있다. 

canvas에는 그래프의 바탕이되는 X,Y 좌표관련 정보를 넣고 태그로 막대 또는 라인 정보를 표현하는 방식이다.

부하는 얼마나 걸릴지 모르겠으나 일단은 괜찮아보인다.

그래프 모양은 다음과 같은 모양이 있는 것 같다.

• line
• bar
• radar
• polar area
• doughnut and pie
• bubble

왜 같다라고 했냐면 각각 설정값에 따라 조금모양이 좀 달라져서 전부 볼수가 없었다. 제대로 볼려면 시간을 좀 투자해봐야 할듯하다. 사이트를 보면 알겠지만, 여기 문서를 보면 조금 어렵게 설명이 잘 되어있다.

http://www.chartjs.org/docs/latest/

다음은 샘플인데, 샘플을 보는게 가장 빠를듯 하다.

http://www.chartjs.org/samples/latest/

라이센스는 MIT license를 따른다고 하니, 자유롭게 사용해도 될듯하다.