CSV 데이터에서 각도 차트를 만드는 방법

마지막으로 Angular에서 HTTPClient 모듈을 사용하여 API의 데이터로 차트를 만들었습니다. 마찬가지로 이 기사에서는 동일한 HTTPClient 모듈과 CanvasJS angular chart component 모듈을 사용하여 CSV 파일의 데이터로 차트를 그릴 것입니다.

CSV(쉼표로 구분된 값) 파일은 쉼표로 구분된 텍스트 파일이며 일반적으로 응용 프로그램 간에 데이터를 공유하는 데 사용됩니다. Microsoft Excel, Google Analytics, Database Tools 등과 같은 많은 애플리케이션은 다른 애플리케이션에서 쉽게 가져올 수 있는 CSV 파일로 내보낼 데이터를 제공합니다. 데이터를 쉽게 이해하고 분석하기 위해 CSV 파일의 데이터를 차트로 그리는 데 여러 번 사용할 수 있습니다. 예를 들어, 웹 사이트 데이터베이스의 판매 데이터를 CSV 파일로 내보내고 데이터 분석가 팀에 전달하여 다양한 캠페인이 판매에 미치는 영향을 분석하고 추정할 수 있습니다. 이제 CSV 데이터에서 각도로 차트를 만드는 방법에 대한 지침을 시작하겠습니다.

전제 조건

Basic Angular App

Installed CanvasJS Angular Chart Component

단계별 지침

1. HTTPClient 모듈 및 차트 구성 요소 등록 및 가져오기는 my를 참조할 수 있습니다.
2. 자산 폴더(sample.csv)에 CSV 파일 저장

Name,Marks
Sonia,89
Rajat,75
Chandran,80
Vishal,90
Raghu,65

3. httpclient 모듈의 get 메소드를 사용하여 CSV 파일을 요청하고 콜백 함수에서 CSV 데이터를 얻기 위해 subscribe 메소드를 사용하십시오.

this.http.get('/assets/sample.csv', { responseType: 'text' }).subscribe((response: any) => {});

4. 응답을 받은 후 CSV 데이터를 줄 단위로 나누고 csv 데이터의 각 줄을 쉼표로 구분하여 차트를 그리기 위한 배열로 넣습니다.

    this.http.get('/assets/sample.csv', { responseType: 'text' }).subscribe((response: any) => {
        let csvRowData = response.split(/[\r?\n|\r|\n]+/);
        csvRowData.forEach((rowData: any, index: number) => {
            var data = rowData.split(',');
        });    
});

5. 다음으로 위 단계에서 얻은 데이터를 CanvasJS에서 허용하는 형식(예: { label: string, y: value })으로 구문 분석합니다.

this.http.get('/assets/sample.csv', { responseType: 'text' }).subscribe((response: any) => {
    let csvRowData = response.split(/[\r?\n|\r|\n]+/);
    csvRowData.forEach((rowData: any, index: number) => {
        // since the first line in CSV contains names of columns, we will skip it
        if (index === 0) return;
        var data = rowData.split(',');
        this.dataPoints.push({ label: data[0], y: parseInt(data[1]) });
    });
    this.chart.render(); 
});

따라서 Angular에서 CSV 데이터의 차트를 구현했습니다. 꽤 쉬웠습니다. 마찬가지로 CSV 데이터를 기반으로 선, 막대, 파이 등과 같은 다양한 차트 유형으로 데이터를 그릴 수 있을 뿐만 아니라 분석을 위해 모든 관련 데이터가 함께 있는 대시보드를 만들 수 있습니다.

개량

초기 단계에서 데이터가 없는 차트를 표시하는 대신. 속성 지시문ngIf을 사용하여 CSV 파일에서 데이터를 검색할 때까지 차트를 숨길 수 있습니다.

/*app.component.html*/
<div *ngIf="showChart">
  <canvasjs-chart [options]="chartOptions" (chartInstance)="getChartInstance($event)"[styles]="{ width: '100%', 
height: '360px' }"></canvasjs-chart>
</div>

/*app.component.ts*/
export class AppComponent {
  showChart: Boolean = false;
  .
  .

  this.http.get('/assets/sample.csv', { responseType: 'text' }).subscribe((response: any) => {
    let csvRowData = response.split(/[\r?\n|\r|\n]+/);
    csvRowData.forEach((rowData: any, index: number) => {
        // since the first line in CSV contains names of columns, we will skip it
        if (index === 0) return;
        var data = rowData.split(',');
        this.dataPoints.push({ label: data[0], y: parseInt(data[1]) });
    });
    this.showChart = true;
  });
  .
}