카테고리 차트

카테고리 차트는 카테고리 데이터를 간단히 시각화할 수 있게 해주는 차트 컴포넌트입니다. 이 컨트롤은 복잡한 데이터 비주얼라이제이션 도메인을 API로 단순화하여 관리할 수 있습니다.

데모

사용자가 데이터 수집 및 수집 그룹에 바인딩하여 데이터를 지정하는 속성을 설정하면 차트 컨트롤이 나머지 작업을 실행합니다. 컴포넌트는 데이터를 분석한 후 데이터를 표시하기 위한 최적의 시리즈를 자동으로 선택합니다. 또한, 사용자는 선, 영역, 기둥, 점, 스플라인, 스플라인 영역, 스텝 영역, 스텝 선 및 워터폴 등과 같은 사전 정의된 차트에서 선택하는 chartType 속성 대신에 설정할 수 있습니다.

스마트 데이터 어댑터를 사용하여 데이터를 분석하여 적절한 비주얼라이제이션을 렌더링합니다. 예를 들면, chartType 속성이 Auto로 설정된 경우, 컨트롤은 작은 데이터 세트를 위해 세로막대형 차트를 사용하거나 더 큰 데이터 세트를 위해 선형 차트를 사용합니다.

그러나, chartType를 명시적으로 다음과 같이 설정하여 차트 유형을 지정할 수도 있습니다:

  • 영역
  • 기둥
  • 스플라인
  • 스플라인 영역
  • 스텝 영역
  • 스텝 선
  • 워터폴

카테고리 차트 컨트롤의 직관적인 동작의 다른 예로서 명시적으로 레이블을 설정할 필요가 없다는 것입니다. 카테고리 차트는 제공한 데이터 내에서 최초의 적절한 문자열 속성을 사용하고 이를 레이블에 사용합니다.

의존성

차트 패키지를 설치할 때 코어 패키지도 설치해야 합니다.

npm install ignite-angular-charts ignite-angular-core

카테고리 차트가 NgModule로 내보내기 되므로 AppModule 내부에 _IgxCategoryChartModule_을 불러오기 해야 합니다:

// app.module.ts
import { IgxCategoryChartModule } from 'ignite-angular-charts/ES5/igx-category-chart-module';

@NgModule({
    imports: [
        ...
        IgxCategoryChartModule,
        ...
    ]
})
export class AppModule {}

사용 가능한 시리즈의 서브세트 및 다른 옵션의 기능을 제외하는 카테고리 차트의 최소 구성을 로드할 수 있으며, 이로써 igxCategoryChartCoreModule 및 igxLineSeriesDynamicModule 등의 사용되는 시리즈의 동적 모듈만 로드할 수 있습니다. chartTypeauto이면 로드된 시리즈 유형이 선택됩니다.

사용 방법

카테고리 차트 모듈을 불러오기 한 후 다음 단계는 데이터에 바인딩합니다.

igx-category-chart 컨트롤을 작성하려면 먼저 데이터를 바인딩해야 합니다. 다음의 코드 조작은 간단한 데이터 소스를 작성하는 방법을 보여줍니다.

var data = [
 { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 },
 { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 },
 { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 },
 { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 },
 { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 }
];

다음의 코드는 카테고리 차트를 상기의 데이터에 바인딩하는 방법을 보여줍니다.

 <igx-category-chart [dataSource]="data"
                     width="700px"
                     height="500px">
 </igx-category-chart>

차트 유형

카테고리 차트의 기본 동작을 무효화하고 표시할 차트 유형을 설정할 수 있습니다. 이는 chartType 속성을 설정하여 실행합니다. 카테고리 차트가 지원하는 모든 유형은 다음과 같습니다.

Note

특별히 속성의 auto 설정이 있습니다. auto을 사용한 경우, 차트는 데이터를 분석하고 가장 적합한 차트 유형을 할당합니다.

지원되는 차트 유형

속성 설명
line Specifies category line series with markers at each data point
area Specifies category area series
column Specifies category column chart with vertical rectangles at each data point
point Specifies category point chart with markers at each data point
stepLine Specifies category step line chart
stepArea Specifies category step area chart
spline Specifies category spline line series with markers at each data point
splineArea Specifies category spline area series
waterfall Specifies category waterfall chart
auto Specifies automatic selection of chart type based on suggestions from Data Adapter
View page on GitHub