Chart.js 사용법 / 적용법

chart.js 는 무료 라이센스를 가지고 있고 다양한 환경에서 적용이 가능한 장점을 가지고 있습니다.

Chart.js is open source and available under the MIT license.

1.설치하기

맥, 리눅스를 사용하시면 npm install을 추천 합니다. (물론, 윈도우도 npm을 사용할 수 있습니다.)

    npm install -g chart.js --save

만약, npm사용 방법을 모른다면. (http://kimsg.tistory.com/20) 에서 CLI설치하기를 따라하시면 됩니다.

GitHub에서 다운 받아도 됩니다. 만약, github에서 다운 받는 방법을 모르신다면 (http://kimsg.tistory.com/232)의 마지막 부분을 따라하시면 됩니다.

Chart.js   사용법 / 적용법

홈페이지 : http://www.chartjs.org/

사용방법 : http://www.chartjs.org/docs/latest/

github : https://github.com/nnnick/Chart.js

라이선스 : MIT License(오픈 소스)

레퍼런스 : http://www.chartjs.org/docs/#getting-started

저는 Bar를 적용해보았습니다.

(http://www.chartjs.org/docs/latest/charts/bar.html)

위와 같은 이런 형태의 차트입니다. 

<!-- Chart.js 사용 -->

그리고 태그는 캔버스 사용!

backgroundColor와 borderColor를 이용하여 각 차트마다 색상을 다르게 지정할 수 있습니다.

data : [] //의 부분에 원하는 값을 넣어서 사용할 수 있습니다.

<script src="js/chart/Chart.js"></script>

<canvas id="myChart" width="400" height="400"></canvas><script>var ctx = document.getElementById("myChart");

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

        scales: {

            yAxes: [{

                ticks: {

                    beginAtZero:true

                }

            }]

        }

    }

});

</script>

Example Usage

var myBarChart = new Chart(ctx, {

    type: 'bar',

    data: data,

    options: options

});

위의 bar 형태 이외에도 다양한 형태와 옵션을 제공하고 있습니다.

• Line
• Bar
• Radar
• Doughnut & Pie
• Polar Area
• Bubble
• Scatter
• Area
• Mixed