Angular 누적 차트
Ignite UI for Angular 누적 차트은 여러 데이터 항목의 값을 누적된 영역/다각형, 막대, 열, 선 또는 스플라인으로 렌더링하는 특수 차트 그룹에 속합니다. 표준 누적형 차트는 데이터 항목의 실제 값을 렌더링하는 반면, 누적형 100% 차트는 전체 값의 백분율로 값을 렌더링합니다.
Angular Stacked Chart Types
다음 예에서는 드롭다운을 사용하여 Angular IgxDataChartComponent 컨트롤에서 사용할 수 있는 다양한 유형의 누적 차트 간에 전환할 수 있습니다.
다음 섹션에서는 Ignite UI for Angular의 개별 유형을 보여줍니다.
Angular Stacked Area Chart
누적 영역형 차트는 선분으로 연결된 점 모음을 사용하여 렌더링되며, 선 아래 영역은 채워지고 서로 쌓입니다. 누적 영역형 차트는 영역 차트와 동일한 요구 사항을 모두 따르지만 시각적으로 음영 처리된 영역이 서로 겹쳐져 있다는 점만 다릅니다.
아래 예제와 같이 데이터를 IgxStackedAreaSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Stacked 100 Area Chart
때때로 시리즈는 시간이 지남에 따라 변화하는 전체의 일부를 나타냅니다. 예를 들어 생산원과 관련된 국가의 에너지 소비량을 나타냅니다. 이러한 경우에는 쌓인 모든 요소를 동일하게 나타내는 것이 더 나은 아이디어일 수 있습니다.
아래 예와 같이 데이터를 IgxStacked100AreaSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Stacked Bar Chart
누적 바 차트 또는 누적 막대 그래프는 차트의 가로 막대에 다양한 크기의 조각을 표시하여 다양한 데이터 범주의 구성을 비교하는 데 사용되는 범주 차트 유형입니다. 각 막대의 길이 또는 조각 더미는 전체 값에 비례합니다.
누적 바 차트 데이터를 나타내는 데이터 요소가 수평으로 나란히 쌓여 데이터를 시각적으로 그룹화한다는 점에서 바 차트와 다릅니다. 각 스택에는 양수 값과 음수 값이 모두 포함될 수 있습니다. 모든 양수 값은 X축의 양수 쪽에 그룹화되고, 모든 음수 값은 X축의 음수 쪽에 그룹화됩니다.
이 누적 바 차트 예에는 숫자 X 축(차트의 하단 레이블)과 범주 Y 축(차트의 왼쪽 레이블)이 있습니다. 아래 예제와 같이 데이터를 IgxStackedBarSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Stacked 100% Bar Chart
Angular 누적 100% 바 차트 X축 값(차트의 하단 레이블) 처리를 제외하고 모든 측면에서 Angular 누적 막대 차트와 동일합니다. 누적 100% 막대형 차트는 데이터를 직접적으로 표시하는 대신 데이터 포인트의 모든 값 합계에 대한 백분율로 데이터를 표시합니다.
이 누적 100% 바 차트 예에서 에너지 제품 값은 가로 막대 조각에 있는 모든 데이터의 100% 값으로 표시됩니다. 아래 예제와 같이 데이터를 IgxStacked100BarSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Stacked Column Chart
누적 기둥 차트 계열이 측면이 아닌 서로 위에 표시된다는 점을 제외하면 모든 측면에서 기둥 차트와 동일합니다. 누적 기둥 차트 계열 간 결과 비교를 표시하는 데 사용됩니다. 컬렉션의 각 스택 조각은 각 스택의 하나의 시각적 요소를 나타냅니다. 각 스택에는 양수 값과 음수 값이 모두 포함될 수 있습니다. 모든 양수 값은 Y축의 양수 쪽에 그룹화되고 모든 음수 값은 Y축의 음수 쪽에 그룹화됩니다. 누적 기둥 차트 누적 막대형 바 차트와 동일한 데이터 플롯 개념을 사용하지만 데이터 요소가 가로선(X축)이 아닌 세로선(Y축)을 따라 쌓입니다.
아래 예와 같이 데이터를 IgxStackedColumnSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Stacked 100% Column Chart
누적 100% 기둥 차트 Y축 값 처리를 제외하고 모든 측면에서 누적형 기둥 차트와 동일합니다. 100% 누적 기둥 차트 데이터를 직접적으로 표시하는 대신 데이터 포인트의 모든 값 합계에 대한 백분율로 데이터를 표시합니다.
아래 예는 태블릿, 휴대폰, 개인용 컴퓨터를 통한 부서별 온라인 쇼핑 트래픽에 대한 연구를 보여줍니다. 아래 예제와 같이 데이터를 IgxStacked100ColumnSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Stacked Line Chart
누적 선형 차트 지역 간 몇 년 동안 생산된 재생 가능 전력량과 같이 시간에 따른 값의 변화를 표시하는 데 자주 사용됩니다. 아래 예와 같이 데이터를 IgxStackedLineSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Stacked 100% Line Chart
누적 100% 꺾은 선형 차트 y축 값 처리를 제외하고 모든 측면에서 누적 꺾은 선형 차트와 동일합니다. 100% 누적 꺾은 선형 차트 데이터를 직접적으로 표시하는 대신 데이터 포인트의 모든 값 합계에 대한 백분율로 데이터를 표시합니다. 아래 예는 태블릿, 휴대폰, 개인용 컴퓨터를 통한 부서별 온라인 쇼핑 트래픽에 대한 연구를 보여줍니다.
아래 예와 같이 데이터를 IgxStacked100LineSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Stacked Spline Area Chart
누적 스플라인 영역 차트는 곡선 스플라인 세그먼트로 연결된 포인트 컬렉션을 사용하여 렌더링되며, 곡선 스플라인 아래의 영역이 채워지고 서로 겹쳐집니다. 누적 스플라인 영역 차트는 영역 차트와 동일한 요구 사항을 모두 따르지만 시각적으로 음영 처리된 영역이 서로 겹쳐진다는 점만 다릅니다.
아래 예와 같이 데이터를 IgxStackedSplineAreaSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Stacked 100% Spline Area Chart
누적 100% 스플라인 영역 차트 y축 값 처리를 제외하고 모든 측면에서 누적 스플라인 영역 차트와 동일합니다. 데이터를 직접적으로 표시하는 대신 100% 누적 스플라인 영역 차트 특정 데이터 포인트에 있는 모든 값의 합계에 대한 백분율로 데이터를 표시합니다. 때때로 차트는 시간이 지남에 따라 변화하는 전체의 일부를 나타냅니다. 예를 들어, 생산원과 관련된 국가의 에너지 소비입니다. 이러한 경우에는 쌓인 모든 요소를 동일하게 표현하는 것이 더 나은 아이디어일 수 있습니다.
아래 예제와 같이 데이터를 IgxStacked100SplineAreaSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Stacked Spline Chart
누적 스플라인 차트 지역 간 몇 년간 생산된 재생 가능 전력량과 같이 시간에 따른 값의 변화를 표시하는 데 자주 사용됩니다. 아래 예제와 같이 데이터를 IgxStackedSplineSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Angular Stacked 100% Spline Chart
누적 100% 스플라인 차트 y축 값 처리를 제외하고 모든 측면에서 누적 스플라인 차트와 동일합니다. 100% 누적 스플라인 차트 데이터를 직접 표시하는 대신 데이터 포인트의 모든 값 합계에 대한 백분율로 데이터를 표시합니다. 아래 예는 태블릿, 휴대폰, 개인용 컴퓨터를 통한 부서별 온라인 쇼핑 트래픽에 대한 연구를 보여줍니다.
데이터를 IgxStacked100SplineSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.
Additional Resources
다음 항목에서 관련 차트 유형에 대한 자세한 내용을 확인할 수 있습니다.
API References
다음 표에는 위 섹션에서 언급된 API 멤버가 나열되어 있습니다.
GitHub