피파온라인4 홈페이지 scss 프로젝트를 진행하며 그래프를 chart.js 로 만들었다. 평소에 많은 클론 코딩을 진행하면서 모양을 만드는 것은 많이 진행했기에, 실제 데이터를 사용해서 유기적으로 변하게 만들어 보아야겠다고 생각했기 때문이다.

1. chart.js 시작하기
2. 그래프 모양 커스텀하기

우선 npm 혹은 cdn으로 설치한다.

<script src="<https://cdn.jsdelivr.net/npm/chart.js>"></script>

그 후 canvas 태그를 사용해서 ID를 지정해준다. 그래프를 반응형으로 만들고 싶다면 부모 태그로 감싸주면 된다. 그리고 사용하고자 하는 바에 맞게 width와 heigtht 값을 설정해준다.

//html

<div>
	<canvas id = "myChart" width = "200" height = "300"></canvas>
</div>

1. 커스텀하기

아래와 같이 스쿼드를 커스텀하기 위해 y축 단위 변경, 그래프 컬러 변경, 이미지 삽입, x축 삭제를 진행했다. 아래 코드에 각 코드 별 분석을 주석으로 처리했다.

const ctx = document.getElementById("myChart");
      new Chart(ctx, {
        type: "bar",
        plugins: [chartAreaBorder, xScaleImage], // 플러그인 지정
        data: {
          labels: [ // 데이터 별 라벨 
            "Red",
           ...
          ],
          datasets: [
          
	          // 실제 활용되는 데이터들이다. image
          
            {
              label: "클래스 이용 비중",
              data: [
                4, 3.1, 3.1, 3, 3, 2.9, 2.2, 2.2, 2.2, 2.2, 2.2, 1.1, 1.0, 0,
              ],
              backgroundColor: "#00c7ff", // 그래프 색상 변경
              images: [ // x축 images 경로 삽입
                "/img/squad-chart-1.png",
               ...
              ],
            },
          ],
        },
        options: {
          plugins: {
            chartAreaBorder: {
              borderColor: "transparent", // 표 테두리 색상 투명으로 변경
            },
          },
          responsive: false,
          scales: {
          
          // x, y 축 grid 선 없애기
            y: {
              grid: {
                display: false,
              },
              gridLines: {
                drawBorder: false,
              },

              beginAtZero: true,
              ticks: {
                stepSize: 4, // 4단위로 단위 끊
              },
            },
            x: {
              // barThickness: 5,
              grid: {
                display: false,
              },
              gridLines: {
                drawBorder: false,
              },
              ticks: {
                display: true,
                callback: function (value, index, values) {
                  return ""; // x축 텍스트 라벨을 숨기기
                },
              },
            },
          },
        },
      });

추가 ) x축 바꾸기

다음과 같은 과정으로 진행된다.