React 영역 차트
Ignite UI for React 영역 차트은 선 아래 영역이 채워진 직선 세그먼트로 연결된 점들의 모음으로 렌더링됩니다. 값은 Y축(왼쪽의 레이블)에 표시되고 카테고리는 X축(아래쪽 레이블)에 표시됩니다. 이 차트는 플롯된 값의 합계를 표시하여 일정 기간 동안의 변화량을 강조하거나 여러 항목을 비교하고 전체와 부분의 관계를 파악할 수 있습니다. 따라서 시간 경과에 따른 상품의 축적과 같은 수량 변화를 시간순으로 표시하는 경우가 많습니다.
React Area Chart Example
React Category 영역 차트 생성할 수 있습니다. IgrCategoryChart
데이터를 바인딩하여 제어하세요 ItemsSource
속성 및 설정 chartType
재산에 영역 아래 예에서 보듯이 열거형입니다.
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
- 데이터 소스는 데이터 항목의 배열 또는 목록이어야 합니다(단일 계열의 경우).
- 데이터 소스는 배열의 배열 또는 목록의 목록(여러 계열의 경우)이어야 합니다.
- 데이터 소스에는 두 개 이상의 데이터 항목이 포함되어 있어야 항목 사이에 선이 렌더링됩니다.
- 모든 데이터 항목에는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어야 합니다.
- 모든 데이터 항목에는 숫자 데이터 열이 하나 이상 포함되어야 합니다.
React Area Chart with Single Series
React 영역 차트 종종 재생 가능 전기 생산량과 같은 시간에 따른 값의 변화를 보여주는 데 사용됩니다. 아래 예와 같이 데이터를 바인딩하고 chartType
속성을 Area
값으로 설정하여 IgrCategoryChart
컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.
React Area Chart with Multiple Series
여러 개를 표시하는 방법과 유사합니다. 선형 차트 그리고 스플라인 차트, 동일한 컨트롤에 여러 영역 차트를 결합할 수도 있습니다. 이는 여러 데이터 소스를 바인딩하여 수행됩니다. ItemsSource
의 재산 IgrCategoryChart
제어.
React Area Chart Styling
영역형 차트에는 영역이 반투명하게 채워지고 선이 두꺼워지며 마커가 평소보다 약간 큰 경우가 많습니다. 다음은 그에 따라 이전의 영역 차트 스타일을 지정하는 방법을 보여주는 예입니다.
Advanced Types of Area Charts
다음 섹션에서는 IgrDataChart
컨트롤 대신 간소화된 API IgrCategoryChart
사용하여 만들 수 있는 고급 React 영역 차트 유형을 설명합니다.
React Step Area Chart
React Step 영역 차트 범주 차트 그룹에 속하며, 연속적인 수직선과 수평선으로 연결된 점의 컬렉션을 사용하여 렌더링되며, 선 아래의 영역은 채워집니다. 값은 y축에 표시되고 범주는 x축에 표시됩니다. Step Area Chart는 시간 경과에 따른 변화량을 강조하거나 여러 항목을 비교합니다. 아래 예와 같이 데이터를 바인딩하고 chartType
속성을 StepArea
값으로 설정하여 IgrCategoryChart
컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.
Advanced Types of Area Charts
다음 섹션에서는 IgrDataChart
컨트롤 대신 간소화된 API IgrCategoryChart
사용하여 만들 수 있는 고급 React 영역 차트 유형을 설명합니다.
React Range Area Chart
React Range 영역 차트 사용하면 시간에 따른 두 값 사이의 범위로 영역을 표시할 수 있습니다. 아래 예에서와 같이 데이터를 IgrRangeAreaSeries
에 바인딩하여 IgrDataChart
컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.
React Stacked Area Chart
React Stacked Area Chars는 선분으로 연결된 점의 컬렉션을 사용하여 렌더링되며, 선 아래의 영역은 채워지고 서로 위에 쌓입니다. Stacked Area Charts는 Area Charts와 동일한 모든 요구 사항을 따르지만 유일한 차이점은 시각적으로 음영 처리된 영역이 서로 위에 쌓인다는 것입니다. 아래 예에서와 같이 데이터를 IgrStackedAreaSeries
에 바인딩하여 IgrDataChart
컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.
React Stacked 100% Area Chart
React Stacked 100% 영역 차트 사용하면 데이터가 시간이 지남에 따라 변화하는 전체의 일부로 표현될 수 있습니다. 예를 들어, 국가의 에너지 소비량은 생산 소스와 관련이 있습니다. 이러한 경우 모든 스택 요소를 동등하게 표현하는 것이 더 나은 생각일 수 있습니다. 아래 예에서와 같이 데이터를 IgrStacked100AreaSeries
에 바인딩하여 IgrDataChart
컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.
React Stacked Spline Area Chart
React Stacked Spline Area Chart는 곡선 스플라인 세그먼트로 연결된 점 모음을 사용하여 렌더링되며, 곡선 스플라인 아래의 영역은 채워지고 서로 위에 쌓입니다. Stacked Spline Area Chart는 영역 차트와 동일한 모든 요구 사항을 따르지만 유일한 차이점은 시각적으로 음영 처리된 영역이 서로 위에 쌓인다는 것입니다. 아래 예에서와 같이 데이터를 IgrStackedSplineAreaSeries
에 바인딩하여 IgrDataChart
컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.
React Stacked 100% Spline Area Chart
React Stacked 100% Spline 영역 차트 y축의 값 처리를 제외하고는 모든 측면에서 Stacked Spline 영역 차트와 동일합니다. Stacked 100% Spline 영역 차트 데이터를 직접 표현하는 대신 특정 데이터 포인트의 모든 값 합계에 대한 백분율로 데이터를 표현합니다. 때때로 차트는 시간이 지남에 따라 변경되는 전체의 일부를 나타냅니다. 예를 들어, 국가의 에너지 소비량은 생산 소스와 관련이 있습니다. 이러한 경우 모든 스택된 요소를 동등하게 표현하는 것이 더 나은 생각일 수 있습니다. 아래 예와 같이 데이터를 IgrStacked100SplineAreaSeries
에 바인딩하여 IgrDataChart
컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.
React Radial Area Chart
React Radial 영역 차트 Radial Chart 그룹에 속하며 데이터 포인트를 연결하는 직선 모음으로 묶인 채워진 다각형 모양을 가지고 있습니다. 이 차트 유형은 영역 차트와 동일한 데이터 플로팅 개념을 사용하지만 데이터 포인트를 수평으로 늘리는 대신 원형 축 주위로 감쌉니다. 아래 예와 같이 IgrRadialAreaSeries
에 데이터를 바인딩하여 IgrDataChart
컨트롤에서 이 유형의 차트를 만들 수 있습니다.
React Polar Area Chart
React Polar 영역 차트 극좌표형 차트 그룹에 속하며 채워진 다각형 모양을 가지고 있으며, 정점 또는 모서리는 데이터 포인트의 극좌표(각도/반지름)에 위치하고 직선으로 연결된 다음 연결된 점으로 표현된 영역을 채웁니다. Polar 영역 차트 Scatter Marker Chart와 동일한 데이터 플로팅 개념을 사용하지만, 수평선을 따라 점과 채워진 영역을 늘리는 대신 점을 원 주위에 감싸고 그려진 영역을 채웁니다. 아래 예와 같이 IgrPolarAreaSeries
에 데이터를 바인딩하여 IgrDataChart
컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.
React Polar Spline Area Chart
React Polar Spline 영역 차트 극좌표형 차트 그룹에 속하며 채워진 다각형 모양을 가지고 있으며, 정점 또는 모서리는 데이터 포인트의 극좌표(각도/반지름)에 위치하고 곡선 스플라인으로 연결된 다음 연결된 점으로 표현된 영역을 채웁니다. Polar Spline 영역 차트 Scatter Marker Chart와 동일한 데이터 플로팅 개념을 사용하지만, 수평선을 따라 점과 채워진 영역을 늘리는 대신 점을 원 주위에 감싸고 그려진 영역을 채웁니다. 아래 예와 같이 IgrPolarSplineAreaSeries
에 데이터를 바인딩하여 IgrDataChart
컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.
Additional Resources
다음 항목에서 관련 차트 유형에 대한 자세한 내용을 확인할 수 있습니다.
API References
다음 표에는 위 섹션에서 언급된 API 멤버가 나열되어 있습니다.
차트 종류 | 컨트롤 이름 | API 회원 |
---|---|---|
영역 | IgrCategoryChart |
chartType = Area |
단계 영역 | IgrCategoryChart |
chartType = StepArea |
범위 지역 | IgrDataChart |
IgrRangeAreaSeries |
방사형 면적 | IgrDataChart |
IgrRadialAreaSeries |
극지방 | IgrDataChart |
IgrPolarAreaSeries |
극 스플라인 영역 | IgrDataChart |
IgrPolarSplineAreaSeries |
누적 영역 | IgrDataChart |
IgrStackedAreaSeries |
누적 스플라인 영역 | IgrDataChart |
IgrStackedSplineAreaSeries |
100% 누적 면적 | IgrDataChart |
IgrStacked100AreaSeries |
100% 스플라인 영역 누적 | IgrDataChart |
IgrStacked100SplineAreaSeries |