chart.js - js 차트 라이브러리

많은 javascript 용 차트 라이브러리가 있지만 오늘은 chart.js에 대해서 다루겠습니다. chartjs.org

설치방법

• npm

npm i chart.js

• GitHub

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

• CDN

https://cdnjs.com/libraries/Chart.js // cdnjs
https://www.jsdelivr.com/package/npm/chart.js?path=dist // jsdelivr

사용법

위의 설치방법중 cdn에서 바로 링크를 삽입하는 방법으로 설명 드리겠습니다.
https://cdnjs.com/libraries/Chart.js 에 가면 같은 버전이라도 다양한 종류들이 있는데 chart.min.js 를 일반적인 html로 된 곳에 사용하면 'Cannot use import statement outside a module' 이 뜳니다. 이때는 chart.umd.min.js 파일을 사용하여야 합니다.

1. chart library 삽입

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" integrity="sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

2. html 작성

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

3. chart 출력

<script>
const ctx = document.getElementById('myChart').getContext('2d');
const 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
  }]
};
const myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});
</script>

그래프 형식별 사용법

Line Chart

const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  datasets: [{
    label: '# Dataset1',
    data: [12, 19, 3, 5, 2, 3],
    borderWidth: 1
  }, {
    label: '# Dataset2',
    data: [7, 9, 1, 8, 6, 18],
    borderWidth: 1
  }]
};

const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Chart.js Line Chart'
      }
    }
  };

const config = {
  type: 'line',
  data: data,
  options: options
};
new Chart(ctx, config);

Bar Chart

const data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [{
    label: '# of Votes',
    data: [12, 19, 3, 5, 2, 3]
  }]
};

const options =  {
  scales: {
    y: {
      beginAtZero: true
    }
  }
}

new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});