React 누적 차트

    Ignite UI for React 누적 차트은 여러 데이터 항목의 값을 누적된 영역/다각형, 막대, 열, 선 또는 스플라인으로 렌더링하는 특수 차트 그룹에 속합니다. 표준 누적형 차트는 데이터 항목의 실제 값을 렌더링하는 반면, 누적형 100% 차트는 전체 값의 백분율로 값을 렌더링합니다.

    React Stacked Chart Types

    다음 예에서는 드롭다운을 사용하여 React IgrDataChart 컨트롤에서 사용할 수 있는 다양한 유형의 누적 차트 간에 전환할 수 있습니다.

    다음 섹션에서는 Ignite UI for React의 개별 유형을 보여줍니다.

    React Stacked Area Chart

    누적 영역형 차트는 선분으로 연결된 점 모음을 사용하여 렌더링되며, 선 아래 영역은 채워지고 서로 쌓입니다. 누적 영역형 차트는 영역 차트와 동일한 요구 사항을 모두 따르지만 시각적으로 음영 처리된 영역이 서로 겹쳐져 있다는 점만 다릅니다.

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

    React Stacked 100 Area Chart

    때때로 시리즈는 시간이 지남에 따라 변화하는 전체의 일부를 나타냅니다. 예를 들어 생산원과 관련된 국가의 에너지 소비량을 나타냅니다. 이러한 경우에는 쌓인 모든 요소를 동일하게 나타내는 것이 더 나은 아이디어일 수 있습니다.

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

    React Stacked Bar Chart

    누적 바 차트 또는 누적 막대 그래프는 차트의 가로 막대에 다양한 크기의 조각을 표시하여 다양한 데이터 범주의 구성을 비교하는 데 사용되는 범주 차트 유형입니다. 각 막대의 길이 또는 조각 더미는 전체 값에 비례합니다.

    누적 바 차트 데이터를 나타내는 데이터 요소가 수평으로 나란히 쌓여 데이터를 시각적으로 그룹화한다는 점에서 바 차트와 다릅니다. 각 스택에는 양수 값과 음수 값이 모두 포함될 수 있습니다. 모든 양수 값은 X축의 양수 쪽에 그룹화되고, 모든 음수 값은 X축의 음수 쪽에 그룹화됩니다.

    이 누적 바 차트 예에는 숫자 X 축(차트의 하단 레이블)과 범주 Y 축(차트의 왼쪽 레이블)이 있습니다. 아래 예제와 같이 데이터를 IgrStackedBarSeries에 바인딩하여 IgrDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

    React Stacked 100% Bar Chart

    React 누적 100% 바 차트 X축 값(차트의 하단 레이블) 처리를 제외하고 모든 측면에서 React 누적 막대 차트와 동일합니다. 누적 100% 막대형 차트는 데이터를 직접적으로 표시하는 대신 데이터 포인트의 모든 값 합계에 대한 백분율로 데이터를 표시합니다.

    이 누적 100% 바 차트 예에서 에너지 제품 값은 가로 막대 조각에 있는 모든 데이터의 100% 값으로 표시됩니다. 아래 예제와 같이 데이터를 IgrStacked100BarSeries에 바인딩하여 IgrDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

    React Stacked Column Chart

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

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

    React Stacked 100% Column Chart

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

    아래 예는 태블릿, 휴대폰, 개인용 컴퓨터를 통한 부서별 온라인 쇼핑 트래픽에 대한 연구를 보여줍니다. 아래 예제와 같이 데이터를 IgrStacked100ColumnSeries에 바인딩하여 IgrDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

    React Stacked Line Chart

    누적 선형 차트 지역 간 몇 년 동안 생산된 재생 가능 전력량과 같이 시간에 따른 값의 변화를 표시하는 데 자주 사용됩니다. 아래 예제와 같이 데이터를 IgrStackedLineSeries에 바인딩하여 IgrDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

    React Stacked 100% Line Chart

    누적 100% 꺾은 선형 차트 y축 값 처리를 제외하고 모든 측면에서 누적 꺾은 선형 차트와 동일합니다. 100% 누적 꺾은 선형 차트 데이터를 직접적으로 표시하는 대신 데이터 포인트의 모든 값 합계에 대한 백분율로 데이터를 표시합니다. 아래 예는 태블릿, 휴대폰, 개인용 컴퓨터를 통한 부서별 온라인 쇼핑 트래픽에 대한 연구를 보여줍니다.

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

    React Stacked Spline Area Chart

    누적 스플라인 영역 차트는 곡선 스플라인 세그먼트로 연결된 포인트 컬렉션을 사용하여 렌더링되며, 곡선 스플라인 아래의 영역이 채워지고 서로 겹쳐집니다. 누적 스플라인 영역 차트는 영역 차트와 동일한 요구 사항을 모두 따르지만 시각적으로 음영 처리된 영역이 서로 겹쳐진다는 점만 다릅니다.

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

    React Stacked 100% Spline Area Chart

    누적 100% 스플라인 영역 차트 y축 값 처리를 제외하고 모든 측면에서 누적 스플라인 영역 차트와 동일합니다. 데이터를 직접적으로 표시하는 대신 100% 누적 스플라인 영역 차트 특정 데이터 포인트에 있는 모든 값의 합계에 대한 백분율로 데이터를 표시합니다. 때때로 차트는 시간이 지남에 따라 변화하는 전체의 일부를 나타냅니다. 예를 들어, 생산원과 관련된 국가의 에너지 소비입니다. 이러한 경우에는 쌓인 모든 요소를 동일하게 표현하는 것이 더 나은 아이디어일 수 있습니다.

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

    React Stacked Spline Chart

    누적 스플라인 차트 지역 간 몇 년간 생산된 재생 가능 전력량과 같이 시간에 따른 값의 변화를 표시하는 데 자주 사용됩니다. 아래 예제와 같이 데이터를 IgrStackedSplineSeries에 바인딩하여 IgrDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

    React Stacked 100% Spline Chart

    누적 100% 스플라인 차트 y축 값 처리를 제외하고 모든 측면에서 누적 스플라인 차트와 동일합니다. 100% 누적 스플라인 차트 데이터를 직접 표시하는 대신 데이터 포인트의 모든 값 합계에 대한 백분율로 데이터를 표시합니다. 아래 예는 태블릿, 휴대폰, 개인용 컴퓨터를 통한 부서별 온라인 쇼핑 트래픽에 대한 연구를 보여줍니다.

    데이터를 IgrStacked100SplineSeries에 바인딩하여 IgrDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

    Additional Resources

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

    API References

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

    차트 종류 컨트롤 이름 API 회원
    누적 영역 IgrDataChart IgrStackedAreaSeries
    누적 막대 IgrDataChart IgrStackedBarSeries
    누적 기둥 IgrDataChart IgrStackedColumnSeries
    누적선 IgrDataChart IgrStackedLineSeries
    누적 스플라인 IgrDataChart IgrStackedSplineSeries
    누적 스플라인 영역 IgrDataChart IgrStackedSplineAreaSeries
    100% 누적 면적 IgrDataChart IgrStacked100AreaSeries
    누적 100% 막대 IgrDataChart IgrStacked100BarSeries
    누적형 100% 열 IgrDataChart IgrStacked100ColumnSeries
    누적 100% 라인 IgrDataChart IgrStacked100LineSeries
    스택형 100% 스플라인 IgrDataChart IgrStacked100SplineSeries
    100% 스플라인 영역 누적 IgrDataChart IgrStacked100SplineAreaSeries