Angular 기둥 차트

Ignite UI for Angular 열 문자, 열 그래프 또는 세로형 바 차트은 폭은 같지만 높이가 다른 열로 인코딩된 데이터로 여러 범주의 데이터 빈도, 개수, 합계 또는 평균을 빠르게 비교하는 데 사용되는 가장 일반적인 범주형 차트 유형 중 하나입니다. 이러한 열은 차트의 아래쪽에서 위쪽으로 데이터 포인트의 값을 향해 확장됩니다. 이 차트는 일정 기간 동안의 변화량을 강조하거나 여러 항목을 비교합니다. 기둥 차트은 다음과 매우 유사합니다. 바 차트와 매우 유사하지만 기둥 차트는 세로 방향(위아래)으로 렌더링되지만 바 차트는 가로 방향(왼쪽에서 오른쪽) 또는 시계 방향으로 90도 회전합니다.

Angular Column Chart Example

Angular 기둥 차트 만들 수 있습니다. IgxCategoryChartComponent 데이터와 설정을 바인딩하여 제어 chartType에게 열 enum은 아래 예와 같습니다.

Column Charts Recommendations

Column Charts Use Cases

기둥형 차트에는 여러 가지 사용 사례가 있습니다. 때를:

관련 카테고리의 데이터 값을 비교해야 합니다.
일정 기간 동안의 데이터를 비교해야 합니다.
동일한 데이터 세트에서 음수 값과 양수 값을 표시해야 합니다.
패닝, 확대/축소, 드릴다운과 같은 차트 상호 작용에 잘 맞는 대용량 데이터 세트를 보유하세요.

Column Charts Best Practices:

데이터 비교가 정확하도록 항상 Y축(왼쪽 또는 오른쪽 축)을 0에서 시작합니다.
시계열 데이터를 왼쪽에서 오른쪽으로 정렬합니다.

When Not to Use Column Charts

10개 또는 12개 이상의 데이터 계열이 있습니다. 당신의 목표는 차트를 읽을 수 있는지 확인하는 것입니다.

Column Charts Data Structure:

데이터 모델에는 숫자 속성이 하나 이상 포함되어야 합니다.
데이터 모델에는 레이블에 대한 옵션 문자열 또는 날짜-시간 속성이 포함될 수 있습니다.
데이터 소스에는 데이터 항목이 하나 이상 포함되어 있어야 합니다.

Angular Column Chart with Single Series

기둥 차트 카테고리 시리즈 그룹에 속하며 데이터 포인트 값을 향해 차트의 아래쪽에서 위쪽으로 확장되는 직사각형 모음을 사용하여 렌더링됩니다.

다음에서 이러한 유형의 차트를 만들 수 있습니다. IgxCategoryChartComponent 데이터를 바인딩하고 설정하여 제어 chartType 재산 열 값은 아래 예와 같습니다.

Angular Column Chart with Multiple Series

기둥 차트 비교 목적으로 범주별로 여러 기둥을 렌더링할 수 있습니다. 다음에서 이러한 유형의 차트를 만들 수 있습니다. IgxCategoryChartComponent 데이터를 바인딩하고 설정하여 제어 chartType 재산 열 값은 아래 예와 같습니다.

Angular Column Chart Styling

Angular 기둥 차트 시각적 모양의 스타일 지정 및 수정을 위한 다양한 옵션이 있습니다.

아래 예제와 같이 데이터를 바인딩하여 컨트롤에서 IgxCategoryChartComponent 이러한 유형의 차트를 만들 수 있습니다.

Advanced Types of Column Charts

다음 섹션에서는 단순화된 API를 사용하여 IgxDataChartComponent 컨트롤 대신 IgxCategoryChartComponent 컨트롤을 사용하여 생성할 수 있는 고급 유형의 각도 Angular 차트를 설명합니다.

Angular Waterfall Chart

폭포형 차트는 카테고리 차트 그룹에 속하며 연속적인 데이터 포인트 간의 차이를 보여주는 수직 열 모음을 사용하여 렌더링됩니다. 열은 값의 양수 변화와 음수 변화를 구별하기 위해 색상으로 구분됩니다. 폭포형 차트는 범위 기둥 차트와 모양이 유사하지만 각 데이터 포인트에 대해 두 개의 열이 아닌 하나의 숫자 데이터 열만 필요합니다.

아래 예와 같이 데이터를 IgxWaterfallSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.

Angular Stacked Column Chart

누적 기둥 차트 계열이 측면이 아닌 서로 위에 표시된다는 점을 제외하면 모든 측면에서 범주형 기둥 차트와 유사합니다. 누적 기둥 차트 계열 간 결과 비교를 표시하는 데 사용됩니다. 컬렉션의 각 스택 조각은 각 스택의 하나의 시각적 요소를 나타냅니다. 각 스택에는 양수 값과 음수 값이 모두 포함될 수 있습니다. 모든 양수 값은 Y축의 양수 쪽에 그룹화되고 모든 음수 값은 Y축의 음수 쪽에 그룹화됩니다. 누적 기둥 차트 누적 막대형 바 차트와 동일한 데이터 플롯 개념을 사용하지만 데이터 요소가 가로선(X축)이 아닌 세로선(Y축)을 따라 쌓입니다.

아래 예와 같이 데이터를 IgxStackedBarSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.

Angular Stacked 100% Column Chart

누적 100% 기둥 차트 Y축 값 처리를 제외하고 모든 측면에서 누적형 기둥 차트와 동일합니다. 데이터를 직접적으로 표시하는 대신, 누적 100개 기둥 차트 데이터 포인트의 모든 값 합계에 대한 백분율로 데이터를 표시합니다.

아래 예와 같이 데이터를 IgxStacked100BarSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.

Angular Range Column Chart

Angular 범위 기둥 차트 범위 차트 그룹에 속하며 기존 범주 기둥 차트 처럼 아래쪽에서 늘어나는 대신 차트의 플롯 영역 중앙에 나타날 수 있는 수직 직사각형을 사용하여 렌더링됩니다. 이 계열 유형은 일정 기간 동안 동일한 데이터 포인트에서 낮은 값과 높은 값 사이의 변화량을 강조하거나 여러 항목을 비교합니다. 범위 값은 Y축에 표시되고 범주는 X축에 표시됩니다.

범위 기둥 차트 범위가 채워진 영역이 아닌 수직 기둥 세트로 표시된다는 점을 제외하면 모든 측면에서 범위 영역 차트 (area-chart.md#angular-range-area-chart)와 동일합니다.

아래 예와 같이 데이터를 IgxRangeColumnSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.

Angular Radial Column Chart

방사형 기둥 차트 방사형 차트 그룹에 속하며 차트 중앙에서 데이터 포인트 위치를 향해 확장되는 직사각형 모음을 사용하여 시각화됩니다. 이는 범주 기둥 차트와 동일한 데이터 플로팅 개념을 활용하지만 데이터 포인트를 수평으로 늘리는 대신 원 주위로 둘러쌉니다.

아래 예와 같이 데이터를 IgxRadialColumnSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.

Additional Resources

다음 항목에서 관련 차트 유형에 대한 자세한 내용을 확인할 수 있습니다.

API References

다음 표에는 위 섹션에서 언급된 API 멤버가 나열되어 있습니다.

차트 종류	컨트롤 이름	API 회원
열	`IgxCategoryChartComponent`	`chartType` = Column
방사형 기둥	`IgxDataChartComponent`	`IgxRadialColumnSeriesComponent`
범위 열	`IgxDataChartComponent`	`IgxRangeColumnSeriesComponent`
누적 기둥	`IgxDataChartComponent`	`IgxStackedColumnSeriesComponent`
누적형 100% 열	`IgxDataChartComponent`	`IgxStacked100ColumnSeriesComponent`
폭포	`IgxDataChartComponent`	`IgxWaterfallSeriesComponent`