Angular 13+ 프로젝트에서 Chart.js를 사용하는 방법

차트는 데이터를 시각화하는 데 사용하기에 최고는 아니지만 최고 중 하나입니다. 모든 개발자는 프로젝트에서 차트를 사용할 수 있어야 합니다. 이 튜토리얼에서는 Chart.js 라이브러리를 사용하여 프로젝트에 차트를 추가하는 방법을 보여드리겠습니다.

참고: 이 튜토리얼은 작성 당시 최신 버전을 사용하여 작성되었습니다.
  • 각도 ~13.3.1
  • Chart.js ~3.7.1

  • 시작하기



    먼저 새로운 Angular 프로젝트를 생성해야 합니다.

    ng new angular-chart-js-tutorial
    


    라우팅 및 CSS 없음을 선택합니다.

    그런 다음 차트 자체에 대한 새 구성 요소를 만듭니다. 따라서 프로젝트 파일로 이동하여 다음 명령을 사용하십시오.

    ng g c components/chart
    


    저는 generate component에 대한 짧은 손을 사용하고 우리 구성 요소에 대한 새 파일을 만들고 있습니다.
    완료되면 코드 편집기 프로젝트를 열고 "app.component.html"파일로 이동합니다. 거기에 있으면 기존 코드를 모두 다음으로 바꿉니다.

    <h1>Chart.js Example</h1>
    
    <app-chart>
    
    </app-chart>
    


    차트 만들기



    이제 "components"파일의 "chart.component.html"파일로 이동하여 다음 코드를 추가해 보겠습니다.

    <div class="chart-container" style="width: 800px; height: 600px;">
        <canvas id="my-chart">
        </canvas>
    </div>
    


    Chart.js는 캔버스 요소를 사용하여 차트를 그립니다. 이제 "chart.component.ts"파일로 전환하고 다음 가져오기를 추가해 보겠습니다.

    import {Chart, ChartConfiguration, ChartItem, registerables} from 'node_modules/chart.js'
    


    그런 다음 메서드를 만들고 ngOnInit() 메서드에서 호출합니다. 이 메서드는 차트 생성을 담당합니다. 코드는 다음과 같아야 합니다.

    ngOnInit(): void {
        this.createChart()
    }
    
    createChart(): void {
    
    }
    

    createChart(): void 방법에서 몇 가지 단계를 따라야 합니다. 차트를 등록하여 시작합니다.

    Chart.register(...registerables);
    


    이제 차트에서 사용할 데이터를 설정하겠습니다.

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


    Chart.js를 사용하면 옵션을 구성하여 차트 자체를 사용자 지정할 수도 있습니다.

    const options = {
          scales: {
            y: {
              beginAtZero: true,
              display: false
            }
          }
        }
    


    이러한 모든 옵션은 0에서 y축을 시작하고 깔끔한 느낌을 주기 위해 y축을 숨기는 것입니다. 완료되면 차트를 구성합니다.

    const config: ChartConfiguration = {
          type: 'line',
          data: data,
          options: options
        }
    


    우리가 만들 차트 유형은 라인 차트입니다. 파이, 도넛, 바, 버블 등과 같은 다른 옵션을 사용할 수 있습니다. 모든 유형의 목록을 보려면 시작할 수 있습니다here. 이제 차트가 표시될 캔버스인 차트 항목을 가져옵니다.

    const chartItem: ChartItem = document.getElementById('my-chart') as ChartItem
    


    마지막으로 이 마지막 코드 줄을 사용하여 차트를 만듭니다.

    new Chart(chartItem, config)
    


    최종 결과



    최종 결과를 보려면 터미널을 열고 ng serve를 입력하고 앱 시작이 완료되면 브라우저에서 localhost:4200으로 이동합니다.

    최종 결과는 다음과 같아야 합니다.


    결론



    Chart.js에 대한 자세한 내용은 자사website , 공식repository을 확인하고 꼭 별표를 해주세요!

    막히는 경우를 대비하여 따라할 수 있는 저장소도 만들었습니다.

    이 게시물이 유용하다고 생각되면 더 많은 Angular 및 개발 팁을 보려면 나를 팔로우하고 GitHub에서 나를 확인하십시오.

    읽어주셔서 감사하고 좋은 하루 되세요! 😄

    좋은 웹페이지 즐겨찾기