ChartJs 예제02 - 파이 차트 구현

저번 포스팅에서 바 차트를 구현해봤다.

 

이번 차트에서는 파이 차트를 구현해보고자 한다.

 

바뀐 거라고는 type 속성 정도(?) 바뀐거 같다.

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>

<!-- 차트 그릴 캔버스 -->
<canvas id="pieChart" style="width:100%;height:60%;"></canvas>

두번째 script 태그는 라벨링에 필요한 플러그인을 설치해주었다.

 

데이터는 예제 01에서 사용했던 육류 소비량 데이터를 가지고 해보겠다.

var dataset = {
    label: "육류 판매량",
    backgroundColor: ['#ffd950', '#02bc77', '#28c3d7', '#FF6384'],//라벨별 컬러설정
    borderColor: '#22252B',
    data: [50, 45, 75, 40]
}

var labels=['돼지고기','소고기','닭고기','양고기']; 
  
var datasets={ datasets:[dataset], labels:labels }

기본 설정은 아래 소스와 같다.

var config = {
    type: 'pie',
    data: datasets, //데이터 셋 
    options: {
        responsive: true,
        maintainAspectRatio: false, //true 하게 되면 캔버스 width,height에 따라 리사이징된다.
        legend: {
            position: 'top',
            fontColor: 'black',
            align: 'center',
            display: true,
            fullWidth: true,
            labels: {
                fontColor: 'rgb(0, 0, 0)'
            }
        },
        plugins: {
            labels: {//두번째 script태그를 설정하면 각 항목에다가 원하는 데이터 라벨링을 할 수 있다.
                render: 'value',
                fontColor: 'black',
                fontSize: 15,
                precision: 2
            }

        }
    }
}

마지막으로 캔버스 element를 연결과 config를 넣고 chartjs 생성자를 생성하면 다음과 같다.

var canvas=document.getElementById('pieChart');
var pieChart = new Chart(canvas,config);

그리고 실행시키면 아래 그림과 같다.

 

다음 포스팅에서는 라인 차트를 그려보는 예제를 진행해보겠다.

 

앞선 포스팅에서도 언급했지만 자세한 내용은 아래 링크에서 참조하고 꼼꼼히 살펴보면 원하는 차트를 구현할 수 있다.

https://www.chartjs.org/docs/2.9.4

Options · Chart.js documentation