[플러그인]chart.js

[ chart.js ]

내가 다시 차트.js할때 보고하려고 정리하는 중

스크립트를 통해 원하는 그래프를 그릴수 있게 도와주는 플러그인(Chart.js는 canvas로 그리는 방식)

해당 플러그인의 라이선스는 MIT로 오픈 소스입니다.

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

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

깃허브 : https://github.com/chartjs/Chart.js

Chart.js CDN : https://cdnjs.com/libraries/Chart.js/2.7.2

여러가지 설치방법이 있지만 CDN을 추가해서 사용하는 것이 편한 것 같습니다.

편하신 방법으로 다운받아서 폴더에 넣거나 cdn을 추가해서 사용하면 됩니다.

build가 두가지가 있다고 안내되어있는데 moment.js가 포함된 타입과 포함되지 않은 타입으로 js가 구분됩니다.

(둘차이 아시는분....알려주세요..)

• Chart.js / Chart.min.js
• Chart.bundle.js /Chart.bundle.min.js   - moment.js가 포함된 타입 

1. canvas 태그삽입

<canvas id="myChart" width="400" height="400"></canvas>

반응형으로 차트를 만들고 싶다면 canvas를 div로 한번 감싸주거나

<div style="width:75%;margin:0 auto;"> <canvas id="chart_canvas" class="chartjs" style="display: block; width: 100%; height: 100%;"></canvas>   </div>

스타일을 사용해서 vw, vh를 사용해줍니다.

<canvas id="myChart" style="width:80vw;height:50vh"></canvas>

2.  script 작성

 var myChart = new Chart(ctx, {...});

차트는 그래프 모양에 따라 구분하여 사용 가능합니다.

1) line 그래프

 

 

http://www.chartjs.org/docs/latest/charts/line.html

2) bar 막대그래프 

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

3) rader형 그래프

 

 

http://www.chartjs.org/docs/latest/charts/radar.html

4) Doughnut & pie 형 그래프

 

 

http://www.chartjs.org/docs/latest/charts/doughnut.html

5) polar area 그래프(pie 차트와 유사하다고 설명되어있음)

 

 

http://www.chartjs.org/docs/latest/charts/polar.html

6) bubble형 그래프

 

http://www.chartjs.org/docs/latest/charts/bubble.html

7) area 그래프(선을 채우는 형태의 차트)

 

http://www.chartjs.org/docs/latest/charts/area.html

- demo : http://www.chartjs.org/samples/latest/charts/area/line-boundaries.html

차트 선언

1) 선언하자마자 바로 data값과 옵션 지정해주기

http://www.chartjs.org/docs/latest/getting-started/usage.html

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart"); //캔버스 id값 가져오기
var myChart = new Chart(ctx, {
    type: 'bar', //그래프 형태 지정하기
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], //X축 제목
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)', //1번째 그래프의 바탕색
                '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)',      //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: { //X,Y축 옵션
            yAxes: [{
                ticks: {
                    beginAtZero:true  //Y축의 값이 0부터 시작
                }
            }]
        }
    }
});
</script>

jsfiddle : https://jsfiddle.net/jywoo/n67vob5r/1/

2) 데이터와 옵션을 선언한 뒤에 차트 선언하기

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], //X축 제목
    datasets: [
	    {                            // 1번째 선그래프의 값
	      label: '# of Votes',
	      data: [12, 19, 3, 5, 2, 3],
      	      borderWidth: 1
    	    },	
	    {                           //2번째 선그래프의 값
		label: '# of Points',
		data: [7, 11, 5, 8, 3, 7],
		borderWidth: 1
	    }
	]
  },
  options: {
  	scales: {
    	  yAxes: [{
            ticks: {
		reverse: false
            }
          }]
        }
   }
};

var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, options);

</script>

jsfiddle : https://jsfiddle.net/jywoo/5z55Lj9s/75/

차트 데이타

- 차트에서 데이터 영역을 선언이나 update할 수 있는 부분, 선그래프 만들면서 포인터부분에 hover이벤트 넣고, 처음 로드시에 마지막 값에만 포인터 넣는 방법 알아내다가 키보드 부술뻔했지만, 암튼 data 선언해주는 부분에서 커스텀 할수있는 것은 보통 데이터 값의 선 모양,바탕색이나 바탕선, 바탕을 채울거냐 말거나, 포인터에 모양을 넣을래말래 따위가 있다.(첨에 제목표시줄 지우는거 3시간동안 찾음....하...)

포인트 스타일이나 선 등의 옵션은 -> http://www.chartjs.org/docs/latest/configuration/elements.html

data -> datasets에서 옵션을 추가하고 지정해주면 되는데 예제에 있는대로 쓰면 참 좋겠는데 그게아니고 디자인해서 주는 그래프라면,,,,,

★☆★☆★☆ UPDATE()&REMOVE() ★☆★☆★☆

update(), remove() - http://www.chartjs.org/docs/latest/developers/updates.html

 

차트 데이터를 버튼으로 add 할수있는 update()함수가 있다.

그리고 데이터를 remove할수있는 remove()함수도 있다. update()만 사용하면 데이터를 추가하여 새 차트를 추가할수있고, remove()까지 같이 쓰면 차트를 change를 할수있다.

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

근데 저 위에 예제에서 화살표 함수 처음봐서 넘 놀램.....이게 머시당가...

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98

https://jsfiddle.net/jywoo/xLjzhasc/21/

차트 옵션

http://www.chartjs.org/docs/latest/general/options.html ( 아솔직히이거읽고 뭐어쩌라고 소리 나왔는데 역시 구글검색이 짜.ㅇ...)

옵션에 여러가지가 있는데 일단 x,y축 디자인변경 혹은 사이값지정이나 라벨을 지운다던다 할수있는 옵션은 Scales

layout에서 padding값을 정의해준다거나(https://opentutorials.org/module/2927/16837),

tooltips을 커스텀 할수도 있음 (http://www.chartjs.org/docs/latest/configuration/tooltip.html)

((툴팁커스텀은 더 공부해봐야알것같다..단순히 title로만 쓰는것이 아니라 아예 간단하게 layerpopup처럼 사용도 가능하기때문에...)

참고자료

1) Chart.js로 시작하기 https://code.tutsplus.com/ko/tutorials/getting-started-with-chartjs-scales--cms-28477

2) 생활코딩 chart.js https://opentutorials.org/module/2927/16829