어떻게 각도가 아름다운 도표를 만듭니까

데이터 시각화에서 도표는 데이터를 나타내는 데 매우 중요한 역할을 한다.놀라운 각도 프레임워크 그래프를 찾고 있다면, Essential JS 2 chart 구성 요소는 그들에게 인상적인 다양한 기능을 제공한다.
이 블로그에서 각도 응용 프로그램에서 간단한 도표를 만들고 기본 기능을 설정하는 과정을 소개할 것입니다.완전한 코드는 우리의 GitHub repository에서 찾을 수 있다.

개발 환경을 조성하다

Angular에서 차트를 작성하기 전에 개발 환경을 설정해야 합니다.원본 코드는 GitHub에서 사용할 수 있고 npm에서 사용할 수 있기 때문에 몇 가지 간단한 절차를 통해 도표를 사용할 수 있습니다.

각도 응용 프로그램 만들기

각도 응용 프로그램을 만들려면 다음 명령을 사용하여 Angular CLI을 전역으로 설치합니다.

npm install -g @angular-cli

다음 명령을 사용하여 새 각도 프로그램을 만듭니다.

ng new my-app

이 명령은 필요한 모든 파일을 다운로드하고 npm 설치를 초기화합니다.

차트 구성 요소 설치

각도 응용 프로그램을 만든 후 다음 명령을 사용하여 차트 패키지를 설치합니다.

cd my-app

npm install @syncfusion/ej2-ng-charts –save

- save 로고는 도표 패키지를 패키지의 의존항으로 저장합니다.json 파일.

차트 구성

환경 설정과 관련된 모든 구성이 완료되었습니다.도표를 설정하기 전에 도표를 보여 주는 구성 요소가 필요합니다.각도 구성 요소를 생성하려면 다음 Angular CLI 명령을 사용합니다.

ng generate component chart

다음은 프로그램에서 도표 모듈을 가져옵니다.단원ts 파일.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ChartComponent } from './chart/chart.component';
import { ChartModule } from '@syncfusion/ej2-ng-charts’; 

@NgModule ({
 declarations: [AppComponent,ChartComponent],
 imports: [BrowserModule, ChartModule],
 bootstrap: [AppComponent]
})
export class AppModule { }

차트 구성 요소 만들기

차트와 관련된 모든 구성이 완료되었습니다.현재 우리는 도표 중의 첫 번째 도표를 정의해야 한다.구성 부분html 파일.

<ejs-chart></ejs-chart>

그리고 응용 프로그램에 도표 구성 요소를 추가합니다.구성 부분html 파일.

<app-chart></app-chart>

어플리케이션에 대한 서비스 제공

응용 프로그램 디렉터리로 이동하고 다음 명령을 사용하여 서버를 시작합니다.

ng serve -open

모든 파일을 성공적으로 컴파일한 후 기본 도표는 아래 그림과 같다.

주입 모듈

지금 우리는 데이터가 없는 기본 도표가 생겼다.일부 데이터를 제공하기 전에, Syncfusion이 지원하는 도표 형식을 좀 더 알아보겠습니다.
Syncfusion 차트 구성 요소는 25가지 이상의 차트 유형을 그릴 수 있습니다.모든 유형은 모듈화되어 단독 서비스로 사용할 수 있기 때문에 응용 프로그램의 경량화를 유지하기 위해 필요한 모듈만 사용할 수 있습니다.예를 들어 기둥 모양의 시각화 데이터를 사용하려면 프로그램 공급자에서columnSeries Service를 정의하십시오.단원ts 파일.이 서비스는 기둥 모양도 기능에 대한 접근을 제공합니다.

import { ChartModule } from '@syncfusion/ej2-ng-charts';
import { CategoryService, ColumnSeriesService } from '@syncfusion/ej2-ng-charts';

@NgModule({
  imports: [ BrowserModule, ChartModule ],
  providers: [CategoryService, ColumnSeriesService ]
 })

공급자에 column Series Service를 주입한 후 시퀀스 형식을 Column으로 설정하고 데이터Source 속성을 사용하여 도표의 데이터를 채웁니다. 이 속성은 자바스크립트 대상을 받아들입니다.

import {Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-chart',
    template:`<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis">
              <e-series-collection>
              <e-series [dataSource]="chartData" type="Column" xName="year" yName="gold"
              name="Gold"> 
              </e-series>              
              </e-series-collection>
              </ejs-chart>`
})

export class AppComponent implements OnInit {
    public chartData: Object [];
    public primaryXAxis: Object; 
    ngOnInit(): void {
        // Data for chart series
        this.chartData = [
            { year:'2000', gold: 35, silver: 25 }, { year: '2001', gold: 28, silver: 20 },
            { year:'2002', gold: 34, silver: 21 }, { year: '2003', gold: 32, silver: 15 },
            { year:'2004', gold: 40, silver: 30 } 
         ];  
         this.primaryXAxis = { valueType: 'Category' };
    }

}

채워진 원통형 그림은 다음과 같습니다.

다른 차트 유형 생성

다른 피리칼트 유형을 실현하는 것은 기둥 모양을 실현하는 것과 매우 비슷하다.면적도나 접선도가 필요하다면, 그에 상응하는 서비스를 제공 프로그램에 주입하고 시퀀스 형식을 바꾸기만 하면 된다.
기둥 모양 그림에 다른 시퀀스를 추가하여 접선도 유형을 가진 다른 데이터 집합을 시각화합니다.

import { ChartModule } from '@syncfusion/ej2-ng-charts';
import { CategoryService, ColumnSeriesService, LineSeriesService} from '@syncfusion/ej2-ng-charts';

@NgModule({
imports: [ BrowserModule, ChartModule ],
providers: [CategoryService, ColumnSeriesService, LineSeriesService]
})

`<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis">

 <e-series [dataSource]="chartData" type="Column" xName="year" yName="gold" name="Gold">
 <e-series [dataSource]="chartData" type="Line" xName="year" yName="silver" name="Silver">

  </ejs-chart>`

제목

사용자가 그림에서 무엇을 찾는지 알려주기 위해 도표에 제목을 지정할 수 있다.제목 텍스트를 제목 속성으로 사용자 정의할 수 있습니다.

`<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis" [title]="title">

        <e-series [dataSource]="chartData" type="Column" legendShape="Circle" xName="year" yName="gold" name="Gold">
        <e-series [dataSource]="chartData" type="Line" legendShape="Triangle" xName="year" yName="silver" name="Silver">

  </ejs-chart>`

export class AppComponent implements OnInit {
    public title: Object;
    public primaryXAxis: Object;
    ngOnInit(): void {
        this.primaryXAxis = { valueType: 'Category'  };
        this.title = 'Olympic Medal Count';
    }
}

전설

최종 사용자와 도표 구성 요소가 상호작용하는 또 다른 방식은 도례를 통해서이다.공급자에 LegendService를 주입하여 범례 기능에 액세스할 수 있습니다.또한 legendSettings의visible 속성을true로 설정해야 합니다.
각 시리즈 유형에는 고유한 범례 아이콘이 있으며 이 아이콘은 범례에 표시되고 시리즈에 지정된 이름은 옆에 표시됩니다.다음 코드 예시에서 우리는 시퀀스에 있는legendShape 속성을 통해 예시 아이콘을 직사각형과 원형으로 변경할 것입니다.

import { ChartModule } from '@syncfusion/ej2-ng-charts';
import { CategoryService, ColumnSeriesService, LineSeriesService, LegendService } from '@syncfusion/ej2-ng-charts';
@NgModule({
    imports: [ BrowserModule, ChartModule ],
    providers: [CategoryService, ColumnSeriesService, LineSeriesService, LegendService]
   })

<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis" [legendSettings]="legendSettings">

     <e-series [dataSource]="chartData" type="Column" legendShape="Rectangle" xName="year" yName="gold" name="Gold">
     <e-series [dataSource]="chartData" type="Line" legendShape="Circle" xName="year" yName="silver" name="Silver">

  </ejs-chart>`

 export class AppComponent implements OnInit {  
    public title: Object;    
    public primaryXAxis: Object;
    public legendSettings: Object;
    ngOnInit(): void {  
       this.primaryXAxis = { valueType: 'Category' };      
       this.legendSettings = {visible : true};
  }
}

도례를 사용하면 다음 그림과 같이 도표가 표시됩니다. 이제 도례와 상호작용하여 원하는 시퀀스를 축소하거나 선택할 수 있습니다.

데이터 레이블

데이터 라벨은 데이터의 가독성을 높이기 위해 설계된 것이다.제공 프로그램에 DataLabel Service를 주입하고 데이터 탭에서visible 속성을 사용하여 데이터 탭 기능에 접근할 수 있습니다.
또한 데이터 레이블의 위치를 변경하여 유연하게 배치할 수 있습니다.다음 코드 예시에서 우리는position 속성을 사용하여 기둥 모양의 데이터 라벨을 스트라이프 그림으로 이동합니다.

import { ChartModule } from '@syncfusion/ej2-ng-charts';
import { CategoryService, ColumnSeriesService, LineSeriesService, LegendService, DataLabelService  } from '@syncfusion/ej2-ng-charts';

@NgModule({
imports: [ BrowserModule, ChartModule ],
providers: [CategoryService, ColumnSeriesService, LineSeriesService, LegendService, DataLabelService ]
 })

`<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis" [legendSettings]="legendSettings">

      <e-series [dataSource]="chartData" type="Column" legendShape="Circle" xName="year" yName="gold" name="Gold" [marker]="columnMarker">
      <e-series [dataSource]="chartData" type="Line" legendShape="Triangle" xName="year" yName="silver" name="Silver" [marker]="lineMarker">

    </ejs-chart>`

   export class AppComponent implements OnInit {
    public title: Object;
    public primaryXAxis: Object;
    public legendSettings: Object;
    public lineMarker : Object;
    public columnMarker : Object;
    ngOnInit(): void {       
        this.primaryXAxis = { valueType: 'Category' };      
        this.legendSettings = {visible : true};      
        this.columnMarker = { dataLabel : { visible :true, position: 'Top'}};
        this.lineMarker = { visible : true, dataLabel : { visible :true }};
    }
}

데이터 태그를 활성화하면 차트는 다음과 같이 표시됩니다.

툴팁

툴팁을 사용하여 차트 데이터 점을 가리킬 때 차트 데이터 점에 대한 더 많은 정보를 제공할 수 있습니다.도구 알림 기능을 사용하려면 제공 프로그램에 Tooltip Service를 삽입하고 enable 속성을true로 설정하여 도구 알림을 사용하십시오

import { ChartModule } from '@syncfusion/ej2-ng-charts';
import { CategoryService, ColumnSeriesService, LineSeriesService, DataLabelService, LegendService, TooltipService  } from '@syncfusion/ej2-ng-charts';
@NgModule({
imports: [ BrowserModule, ChartModule ],
providers: [CategoryService, ColumnSeriesService, LineSeriesService, DataLabelService, LegendService, TooltipService ]
 })  

`<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis" [legendSettings]="legendSettings" [tooltip]="tooltip">

     <e-series [dataSource]="chartData" type="Column" legendShape="Circle" xName="year" yName="gold" name="Gold" [marker]="columnMarker">
     <e-series [dataSource]="chartData" type="Line" legendShape="Triangle" xName="year" yName="silver" name="Silver" [marker]="lineMarker">

 </ejs-chart>`

export class AppComponent implements OnInit {
    public title: Object;
    public primaryXAxis: Object; 
    public legendSettings: Object;
    public lineMarker : Object;
    public columnMarker : Object;
    public tooltip : Object;
    ngOnInit(): void {
        this.primaryXAxis = { valueType: 'Category'  };
        this.legendSettings = {visible : true};
        this.columnMarker = { dataLabel : { visible :true, position: 'Top'}};
        this.lineMarker = { dataLabel : { visible :true }};
        this.tooltip = {enable : true};
    }
}

결론

이 블로그에서 우리는 간단한 도표를 만들고 기본적인 기능을 강화하는 방법을 배웠다.도표 구성 요소는 서로 다른 어댑터의 데이터와 귀속, 축소, 선택, 궤적구, 십자선, 재무 도표, 극 좌표도와 레이더도, 케이크, 주석, 축 유형, 줄 등 많은 다른 고급 기능을 제공한다.
source on GitHub, 상호작용 sample browser 및 documentation을 통해 차트 구성 요소를 확인하여 모든 기능과 API를 탐색하는 것이 좋습니다.그 밖에 chart sample on GitHub을 반드시 보십시오. 이것은 실행하기 쉬우며, 도표를 만들고 설정하는 것이 얼마나 쉬운지 보십시오.
이 도표가 다른 프레임워크에 사용되기를 원합니까?너는 운이 좋다.이것은 현재 ASP.NET Core, ASP.NET MVC, JavaScript, React에 사용할 수 있으며 머지않아 Vue(2018년 제2권 발표 예정)에도 사용할 것이다.
만약 당신에게 어떤 문제나 의견이 있다면, 아래의 의견에서 우리에게 알려 주십시오.당신도 우리의 support forum 또는 Direct-Trac을 통해 우리에게 연락할 수 있습니다.우리는 기꺼이 당신을 도울 것입니다!
게시물 Create Beautiful Charts in Angular이 Syncfusion Blogs에 먼저 올라왔습니다.