Angular 영역 차트
Ignite UI for Angular 영역 차트은 선 아래 영역이 채워진 직선 세그먼트로 연결된 점들의 모음으로 렌더링됩니다. 값은 Y축(왼쪽의 레이블)에 표시되고 카테고리는 X축(아래쪽 레이블)에 표시됩니다. 이 차트는 플롯된 값의 총합을 표시하여 일정 기간 동안의 변화량을 강조하거나 여러 항목을 비교하고 전체의 일부 관계를 비교할 수 있습니다. 따라서 시간 경과에 따른 상품의 누적과 같은 수량 변화를 시간순으로 표시하는 경우가 많습니다.
Angular Area Chart Example
Angular 카테고리 영역 차트 만들 수 있습니다. IgxCategoryChartComponent 데이터를 바인딩하여 제어 ItemsSource 속성과 설정 chartType 재산 영역 아래 예와 같이 enum입니다.
Area Chart Recommendations
Area Chart Use Cases
영역 차트 선택하는 데는 몇 가지 일반적인 사용 사례가 있습니다.
- 패닝, 확대/축소, 드릴다운과 같은 차트 상호 작용에 잘 맞는 대용량 데이터 세트를 보유하세요.
- 시간 경과에 따른 데이터 추세를 비교해야 합니다.
- 2개 이상의 데이터 계열 간의 차이점을 표시하고 싶습니다.
- 개별 범주의 누적된 부분 대 전체 비교를 표시하려고 합니다.
- 비교 분석을 위해 하나 이상의 범주에 대한 데이터 추세를 표시해야 합니다.
- 세부 시계열 데이터를 시각화해야 합니다.
Area Chart Best Practices
- 데이터 비교가 정확하도록 항상 Y축(왼쪽 또는 오른쪽 축)을 0에서 시작합니다.
- 시계열 데이터를 왼쪽에서 오른쪽으로 정렬합니다.
- 다른 계열 뒤에 표시되는 데이터가 차단되지 않도록 투명 색상을 사용하십시오.
When Not to Use Area Charts
- 7개 또는 10개 이상의 데이터 계열이 있습니다. 당신의 목표는 차트를 읽을 수 있는지 확인하는 것입니다.
- 시계열 데이터는 유사한 값(동일 기간 동안의 데이터)을 갖습니다. 이로 인해 겹쳐진 음영 영역을 구별할 수 없게 됩니다.
Area Chart Data Structure
- 데이터 소스는 데이터 항목의 배열 또는 목록이어야 합니다(단일 계열의 경우).
- 데이터 소스는 배열의 배열 또는 목록의 목록(여러 계열의 경우)이어야 합니다.
- 데이터 소스에는 두 개 이상의 데이터 항목이 포함되어 있어야 항목 사이에 선이 렌더링됩니다.
- 모든 데이터 항목에는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어야 합니다.
- 모든 데이터 항목에는 숫자 데이터 열이 하나 이상 포함되어야 합니다.
Angular Area Chart with Single Series
Angular 영역 차트 생산된 재생 가능 전기량과 같이 시간에 따른 값의 변화를 표시하는 데 자주 사용됩니다. 아래 예제와 같이 데이터를 바인딩하고 chartType 속성을 Area 값으로 설정하여 IgxCategoryChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Area Chart with Multiple Series
여러 개를 표시하는 방법과 유사합니다. 선형 차트 그리고 스플라인 차트, 동일한 컨트롤에 여러 영역 차트를 결합할 수도 있습니다. 이는 여러 데이터 소스를 바인딩하여 수행됩니다. ItemsSource의 재산 IgxCategoryChartComponent 제어.
Angular Area Chart Styling
영역형 차트에는 영역이 반투명하게 채워지고 선이 두꺼워지며 마커가 평소보다 약간 큰 경우가 많습니다. 다음은 그에 따라 이전의 영역 차트 스타일을 지정하는 방법을 보여주는 예입니다.
Advanced Types of Area Charts
다음 섹션에서는 단순화된 API를 사용하여 IgxDataChartComponent 컨트롤 대신 IgxCategoryChartComponent 컨트롤을 사용하여 생성할 수 있는 고급 유형의 Angular 영역 차트에 대해 설명합니다.
Angular Step Area Chart
Angular 단계 영역 차트는 범주 차트 그룹에 속하며 선 아래 영역이 채워진 연속적인 수직선 및 수평선으로 연결된 점 모음을 사용하여 렌더링됩니다. 값은 y축에 표시되고 범주는 x축에 표시됩니다. 단계 영역 차트는 일정 기간 동안의 변화량을 강조하거나 여러 항목을 비교합니다. 아래 예제와 같이 데이터를 바인딩하고 속성을 StepArea 값으로 설정하여 chartType 컨트롤에서 IgxCategoryChartComponent 이러한 유형의 차트를 만들 수 있습니다.
Advanced Types of Area Charts
다음 섹션에서는 단순화된 API를 사용하여 IgxDataChartComponent 컨트롤 대신 IgxCategoryChartComponent 컨트롤을 사용하여 생성할 수 있는 고급 유형의 Angular 영역 차트에 대해 설명합니다.
Angular Range Area Chart
Angular 범위 영역 차트 사용하면 시간에 따른 두 값 사이의 범위로 영역을 표시할 수 있습니다. 아래 예와 같이 데이터를 IgxRangeAreaSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Stacked Area Chart
Angular 누적 영역 문자는 선분으로 연결된 점 모음을 사용하여 렌더링되며 선 아래 영역은 채워지고 서로 쌓입니다. 누적 영역형 차트는 영역형 차트와 동일한 요구 사항을 모두 따르지만 시각적으로 음영 처리된 영역이 서로 겹쳐져 있다는 점만 다릅니다. 아래 예와 같이 데이터를 IgxStackedAreaSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Stacked 100% Area Chart
Angular 누적 100% 영역 차트 사용하면 데이터를 시간이 지남에 따라 변경되는 전체의 일부로 표시할 수 있습니다(예: 데이터가 생산되는 소스와 관련된 국가의 에너지 소비). 이러한 경우에는 쌓인 모든 요소를 동일하게 나타내는 것이 더 나은 아이디어일 수 있습니다. 아래 예와 같이 데이터를 IgxStacked100AreaSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Stacked Spline Area Chart
Angular 누적 스플라인 영역 차트 곡선 스플라인 세그먼트로 연결된 점 모음을 사용하여 렌더링되며, 곡선 스플라인 아래 영역이 채워지고 서로 쌓입니다. 누적 스플라인 영역 차트 영역형 차트와 동일한 요구 사항을 모두 따르지만 시각적으로 음영 처리된 영역이 서로 겹쳐져 있다는 점만 다릅니다. 아래 예와 같이 데이터를 IgxStackedSplineAreaSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Stacked 100% Spline Area Chart
Angular 누적 100% 스플라인 영역 차트 y축 값 처리를 제외하고 모든 측면에서 누적 스플라인 영역 차트와 동일합니다. 데이터를 직접적으로 표시하는 대신 100% 누적 스플라인 영역 차트 특정 데이터 포인트에 있는 모든 값의 합계에 대한 백분율로 데이터를 표시합니다. 때때로 차트는 시간이 지남에 따라 변화하는 전체의 일부를 나타냅니다. 예를 들어, 생산원과 관련된 국가의 에너지 소비입니다. 이러한 경우에는 쌓인 모든 요소를 동일하게 표현하는 것이 더 나은 아이디어일 수 있습니다. 아래 예와 같이 데이터를 IgxStacked100SplineAreaSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Radial Area Chart
Angular 방사형 영역 차트 방사형 차트(Radial Chart) 그룹에 속하며 데이터 포인트를 연결하는 직선 모음으로 둘러싸인 채워진 다각형의 모양을 갖습니다. 이 차트 유형은 영역 차트와 동일한 데이터 그리기 개념을 사용하지만 데이터 포인트를 가로로 늘리는 대신 원형 축을 중심으로 둘러쌉니다. 아래 예제와 같이 데이터를 IgxRadialAreaSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Polar Area Chart
Angular Polar 영역 차트 극좌표형 차트의 그룹에 속하며 데이터 포인트의 극(각도/반지름) 좌표에 꼭지점이나 모서리가 위치하여 직선으로 연결되어 채워진 다각형의 형태를 갖습니다. 연결된 점으로 표현되는 영역. Polar 영역 차트 Scatter Marker Chart와 동일한 데이터 플로팅 개념을 사용하지만 수평선을 따라 점과 채워진 영역을 늘리는 대신 원 주위에 점을 둘러싸서 그려진 영역을 채웁니다. 아래 예와 같이 데이터를 IgxPolarAreaSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Polar Spline Area Chart
Angular 폴라 스플라인 영역 차트 극좌표형 차트 그룹에 속하며 채워진 다각형의 형태를 가지며, 정점이나 모서리는 데이터 포인트의 극(각도/반지름) 좌표에 위치하며 곡선 스플라인으로 연결된 후 채워집니다. 연결된 점으로 표시되는 영역. Polar Spline 영역 차트 Scatter Marker Chart와 동일한 데이터 플로팅 개념을 사용하지만 수평선을 따라 점과 영역을 늘리는 대신 점을 원 주위로 감싸고 그려진 영역을 채웁니다. 아래 예제와 같이 데이터를 IgxPolarSplineAreaSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Additional Resources
다음 항목에서 관련 차트 유형에 대한 자세한 내용을 확인할 수 있습니다.
API References
다음 표에는 위 섹션에서 언급된 API 멤버가 나열되어 있습니다.
| 차트 종류 | 컨트롤 이름 | API 회원 |
|---|---|---|
| 영역 | IgxCategoryChartComponent |
chartType = Area |
| 단계 영역 | IgxCategoryChartComponent |
chartType = StepArea |
| 범위 지역 | IgxDataChartComponent |
IgxRangeAreaSeriesComponent |
| 방사형 면적 | IgxDataChartComponent |
IgxRadialAreaSeriesComponent |
| 극지방 | IgxDataChartComponent |
IgxPolarAreaSeriesComponent |
| 극 스플라인 영역 | IgxDataChartComponent |
IgxPolarSplineAreaSeriesComponent |
| 누적 영역 | IgxDataChartComponent |
IgxStackedAreaSeriesComponent |
| 누적 스플라인 영역 | IgxDataChartComponent |
IgxStackedSplineAreaSeriesComponent |
| 100% 누적 면적 | IgxDataChartComponent |
IgxStacked100AreaSeriesComponent |
| 100% 스플라인 영역 누적 | IgxDataChartComponent |
IgxStacked100SplineAreaSeriesComponent |
GitHub