Chart.js 시작하기

Chart.js를 사용하기 위해서는 먼저 아래사이트에 접속합니다.

 

https://www.chartjs.org/

Chart.js | Open source HTML5 Charts for your website

 

 

접속해서 Get Started를 클릭하면 사용방법에 대해서 나와있습니다.

 

 

Chart.js를 사용하기 위해서 먼저 Installation 클릭해 보면

 

인스톨 할 수 있는여러가지 방법들이 나오는데요

 

npm을 사용할 수도 있고 cdn을 사용할 수 도 있고 깃허브에서 다운받아 사용할 수 도 있습니다.

저는 다양한 방법중 cdn을 이용하기 위해서 CDNJS에 링클를 클릭해서 cdn을 복사해서 header영역에 넣어줍니다.

 

Copy Script Tab를 클릭했을때 나오는 integrity속성이 궁금하다면 아래 포스팅을 참고

https://moo-you.tistory.com/445

CDN integrity 속성

 

 

cdn을 설치 했다면 Getting Started를 클릭해서 하나씩 따라해봅니다.

 

 

<div>
  <canvas id="myChart"></canvas>
</div>

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

<script>
  const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );
</script>

 

<script>
  const labels = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
  ];

  const data = {
    labels: labels,
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [0, 10, 5, 2, 20, 30, 45],
    }]
  };

  const config = {
    type: 'line',
    data: data,
    options: {}
  };
</script>

 

위와 같이 작성해 주면 아래와 같은 차트가 만들어집니다.