[javaScript] chart.js 사이즈 변경 / 크기 설정

chart.js 사이즈 변경하기 / 크기 설정하기

 

 

chart.js 샘플 코드를 받아서 실행하면 사이즈가 고정적으로 되어있다.

난 그것도 모르고 계속 css 코드를 수정작업했지만 크기는 변경되지 않았다ㅏ...

 

 

---

 

 

chart.js 크기 변경하는 방법은 너무 간단했다..

 

 

아래는 chart.js의 샘플예제를 살펴볼수 있는 주소이다.

다양한 chart가 있으니 들어가서 살펴보면 나중에 필요한 chart를 바로 사용할 수 있을 것이다.

https://www.chartjs.org/

 

 

 

먼저, chart.js의 샘플예제 코드 !!!

나는 도넛차트를 사용할 예정이여서 type:'doughnut'을 선택해줬다.

<script>
var ctx = document.getElementById('testChart');
var config = {
      type: 'doughnut',
      data: {
         datasets: [{
            data: [
               10,20,30,40,50
            ],
            backgroundColor: [
               "red",
               "orange",
               "yellow",
               "green",
               "blue",
            ],
            label: 'Dataset 1'
         }],
         labels: [
            'Red',
            'Orange',
            'Yellow',
            'Green',
            'Blue'
         ]
      },
      options: {
         responsive: true,
         legend: {
            position: 'top',
         },
         title: {
            display: true,
            text: 'Chart.js Doughnut Chart'
         },
         animation: {
            animateScale: true,
            animateRotate: true
         }
      }
   };
var myDoughnutChart = new Chart(ctx, config);
</script>

 

 

 

크기를 변경해주는 방법은 정적 크기 변동과 반응형을 위한 동적 크기 변동 두가지가 있다.

 

정적이던 동적이던 크기를 변경해주려면 options에서 responsive를 false로 바꿔줘야된다.

기본 설정은 true로 되어있으니 유의하자 ! 난 이거를 못찾아서 헤맷당... ㅠ_ㅠ !!!!!

<script>
var ctx = document.getElementById('testChart');
var config = {
      type: 'doughnut',
      data: {
         datasets: [{
            data: [
               10,20,30,40,50
            ],
            backgroundColor: [
               "red",
               "orange",
               "yellow",
               "green",
               "blue",
            ],
            label: 'Dataset 1'
         }],
         labels: [
            'Red',
            'Orange',
            'Yellow',
            'Green',
            'Blue'
         ]
      },
      options: {
         responsive: false,
         legend: {
            position: 'top',
         },
         title: {
            display: true,
            text: 'Chart.js Doughnut Chart'
         },
         animation: {
            animateScale: true,
            animateRotate: true
         }
      }
   };
var myDoughnutChart = new Chart(ctx, config);
</script>

responsive를 false로 바꿔주었으면 차트를 그릴 <canvas>부분 설정해주자 !

여기서 정적 크기변경/ 동적 크기변경이 달라진다당 !!  id는 getElementId에서 설정한 id로 맞춰주자.

 

 

 

chart.js 정적 크기 변경 방법

<canvas id="testChart" width="60" height="60"></canvas>

 

chart.js 동적 크기 변경 방법

반응형으로 사용할 때 vw와 vh 설정으로 사이즈 조정이 가능하다. 

<canvas id="testChart" width="60vw" height="60vh"></canvas>