Web Components 영역 차트

    Ignite UI for Web Components 영역 차트는 선 아래 영역이 채워진 직선 세그먼트로 연결된 점의 집합으로 렌더링됩니다. 값은 y축(왼쪽의 레이블)에 표시되고 범주는 x축(아래쪽 레이블)에 표시됩니다. 이 차트는 일정 기간 동안의 변화량을 강조하거나 표시된 값의 합계를 표시하여 여러 항목과 전체 부분의 관계를 비교합니다. 그러므로, 그것들은 종종 연대순이며, 예를 들어 시간이 지남에 따라 상품의 축적과 같은 수량의 변화를 보여줍니다.

    Web Components Area Chart Example

    카테고리 영역 차트 Web Components 생성할 수 있습니다.IgcCategoryChartComponent 데이터를 다음과 같은 곳에 묶어 제어합니다.ItemsSource 부동산과 환경chartType property를 지역 아래 예시에서 볼 수 있는 것처럼 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

    • 데이터 소스는 데이터 항목의 배열 또는 목록이어야 합니다(단일 계열의 경우).
    • 데이터 소스는 배열의 배열 또는 목록의 목록(여러 계열의 경우)이어야 합니다.
    • 데이터 소스에는 두 개 이상의 데이터 항목이 포함되어 있어야 항목 사이에 선이 렌더링됩니다.
    • 모든 데이터 항목에는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어야 합니다.
    • 모든 데이터 항목에는 숫자 데이터 열이 하나 이상 포함되어야 합니다.

    Web Components Area Chart with Single Series

    Web Components 영역 차트는 재생 가능 전기가 생산되는 양과 같이 시간에 따른 가치 변화를 나타내는 데 자주 사용됩니다. 아래 예시처럼 데이터를 바인딩하고 속성을 값으로IgcCategoryChartComponent 설정chartType 하면 이 차트Area를 제어할 수 있습니다.

    Web Components Area Chart with Multiple Series

    여러 개를 보여주는 것과 비슷하게요. 선형 차트 그리고 스플라인 차트, 같은 컨트롤 내에서 여러 에어리어 차트를 결합할 수도 있습니다. 이는 여러 데이터 소스를 다음과 같이 결합함으로써 이루어집니다.ItemsSource​IgcCategoryChartComponent 제어.

    Web Components Area Chart Styling

    영역형 차트에는 영역이 반투명하게 채워지고 선이 두꺼워지며 마커가 평소보다 약간 큰 경우가 많습니다. 다음은 그에 따라 이전의 영역 차트 스타일을 지정하는 방법을 보여주는 예입니다.

    Advanced Types of Area Charts

    다음 섹션에서는 단순화된 API가 아닌IgcDataChartComponent 컨트롤을IgcCategoryChartComponent 사용해 생성할 수 있는 더 고급 유형의 Web Components 영역 차트를 설명합니다.

    Web Components Step Area Chart

    Web Components 단계는 영역 차트 카테고리 차트 그룹에 속하며, 연속된 수직선과 수평선으로 연결된 점들의 집합을 사용해 표현되고 선 아래 영역은 채워져 있습니다. 값은 y축에 표시되고, 카테고리는 x축에 표시됩니다. 단계 영역 차트는 일정 기간 동안 변화의 양을 강조하거나 여러 항목을 비교합니다. 아래 예시처럼 데이터를 바인딩하고 속성을 값으로IgcCategoryChartComponent 설정chartType 하면 이 차트StepArea를 제어할 수 있습니다.

    다음 섹션에서는 단순화된 API가 아닌IgcDataChartComponent 컨트롤을IgcCategoryChartComponent 사용해 생성할 수 있는 더 고급 유형의 Web Components 영역 차트를 설명합니다.

    Web Components Range Area Chart

    Web Components 범위 영역 차트은 시간에 따른 두 값 사이의 범위를 표시할 수 있게 해줍니다. 아래 예시처럼 데이터를IgcDataChartComponent 묶어 컨트롤할 수 있는 차트를 만들IgcRangeAreaSeriesComponent 수 있습니다.

    Web Components Stacked Area Chart

    Web Components 스택드 영역 문자는 선분으로 연결된 여러 점들을 사용해 렌더링되며, 선 아래 영역은 채워져 서로 겹쳐 놓습니다. 스택드 에어리어 차트는 에어리어 차트와 동일한 요구사항을 따르지만, 시각적으로 음영 처리된 영역들이 겹쳐져 있다는 점이 다릅니다. 아래 예시처럼 데이터를IgcDataChartComponent 묶어 컨트롤할 수 있는 차트를 만들IgcStackedAreaSeriesComponent 수 있습니다.

    Web Components Stacked 100% Area Chart

    Web Components 100% 스택 영역 차트은 데이터를 전체 일부로 표현할 수 있게 해줍니다. 이는 시간이 지남에 따라 변하는 국가의 에너지 소비와 같은 것으로, 예를 들어 생산원과 관련된 국가의 에너지 소비입니다. 이런 경우에는 모든 스택 요소를 균등하게 표현하는 것이 더 나은 방법일 수 있습니다. 아래 예시처럼 데이터를IgcDataChartComponent 묶어 컨트롤할 수 있는 차트를 만들IgcStacked100AreaSeriesComponent 수 있습니다.

    Web Components Stacked Spline Area Chart

    Web Components 스택드 스플라인 영역 차트은 곡선 스플라인 구간으로 연결된 점들의 집합을 사용하여 렌더링되며, 곡선 스플라인 아래 영역은 채워져 서로 겹쳐집니다. 스택드 스플라인 영역 차트은 면적 차트와 동일한 요구사항을 따르며, 시각적으로 음영 처리된 영역들이 서로 겹쳐져 있다는 점만 다릅니다. 아래 예시처럼 데이터를IgcDataChartComponent 묶어 컨트롤할 수 있는 차트를 만들IgcStackedSplineAreaSeriesComponent 수 있습니다.

    Web Components Stacked 100% Spline Area Chart

    Web Components 스택 100% 스플라인 영역 차트은 y축 값의 처리 외에는 모든 면에서 스택드 스플라인 영역 차트과 동일합니다. 스택 100% 스플라인 영역 차트은 데이터를 직접 표현하는 대신, 특정 데이터 포인트의 모든 값의 합의 백분율로 데이터를 표현합니다. 때로는 차트가 시간이 지남에 따라 변화하는 전체의 일부를 나타냅니다. 예를 들어, 한 국가의 에너지 소비는 생산원과 연관되어 있습니다. 이런 경우에는 모든 쌓인 요소를 동일하게 표현하는 것이 더 나은 방법일 수 있습니다. 아래 예시처럼 데이터를IgcDataChartComponent 묶어 컨트롤할 수 있는 차트를 만들IgcStacked100SplineAreaSeriesComponent 수 있습니다.

    Web Components Radial Area Chart

    Web Components 방사형 영역 차트 은 방사형 차트 그룹에 속하며, 데이터 포인트를 연결하는 직선 모음으로 둘러싸인 채워진 다각형 형태를 가지고 있습니다. 이 차트 유형은 영역 차트와 동일한 데이터 플롯 개념을 사용하지만, 데이터 포인트를 수평으로 늘리는 대신 원축을 중심으로 감싸는 방식입니다. 아래 예시처럼 데이터를IgcDataChartComponent 묶어 컨트롤할 수 있는 차트를 만들IgcRadialAreaSeriesComponent 수 있습니다.

    Web Components Polar Area Chart

    Web Components 극좌 영역 차트 은 극좌표형 차트 그룹에 속하며, 데이터 점들의 극좌(각도/반지름) 좌표에 꼭짓점이나 모서리가 위치하고, 직선으로 연결된 점들이 나타내는 영역을 채우는 채워진 채워진 다각형 형태를 가지고 있습니다. 극지 영역 차트은 산점 표시 차트와 동일한 데이터 플롯 개념을 사용하지만, 점들을 원을 감싸고 그려진 영역을 채우는 방식이며, 점과 면적을 수평선을 따라 늘리는 대신 채워집니다. 아래 예시처럼 데이터를IgcDataChartComponent 묶어 컨트롤할 수 있는 차트를 만들IgcPolarAreaSeriesComponent 수 있습니다.

    Web Components Polar Spline Area Chart

    Web Components 극좌 스플라인 영역 차트 는 극좌표형 차트 군에 속하며, 데이터 점의 극(각도/반지름) 좌표에 정점이나 모서리가 위치하고, 곡선 스플라인으로 연결된 후 연결된 점들이 나타내는 영역을 채우는 채워진 다각형 형태를 가집니다. 극좌 스플라인 영역 차트은 산점 표시 차트와 동일한 데이터 플롯 개념을 사용하지만, 점들을 원을 감싸고 표시된 영역을 채우는 방식이며, 점과 면적을 수평선을 따라 늘리는 대신 채워집니다. 아래 예시처럼 데이터를IgcDataChartComponent 묶어 컨트롤할 수 있는 차트를 만들IgcPolarSplineAreaSeriesComponent 수 있습니다.

    Additional Resources

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

    API References

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

    차트 종류 컨트롤 이름 API 회원
    영역 IgcCategoryChartComponent chartType = Area
    단계 영역 IgcCategoryChartComponent chartType = StepArea
    범위 지역 IgcDataChartComponent IgcRangeAreaSeriesComponent
    방사형 면적 IgcDataChartComponent IgcRadialAreaSeriesComponent
    극지방 IgcDataChartComponent IgcPolarAreaSeriesComponent
    극 스플라인 영역 IgcDataChartComponent IgcPolarSplineAreaSeriesComponent
    누적 영역 IgcDataChartComponent IgcStackedAreaSeriesComponent
    누적 스플라인 영역 IgcDataChartComponent IgcStackedSplineAreaSeriesComponent
    100% 누적 면적 IgcDataChartComponent IgcStacked100AreaSeriesComponent
    100% 스플라인 영역 누적 IgcDataChartComponent IgcStacked100SplineAreaSeriesComponent