React 바 차트

    Ignite UI for React 바 차트, 막대 그래프 또는 가로형 바 차트은 높이가 같지만 길이가 다른 가로 막대로 인코딩된 데이터로 여러 카테고리의 데이터 빈도, 개수, 합계 또는 평균을 빠르게 비교하는 데 사용되는 가장 일반적인 카테고리 차트 유형 중 하나입니다. 이 차트는 시간에 따른 항목 값의 변화를 표시하는 데 이상적입니다. 데이터는 차트의 왼쪽에서 오른쪽으로 데이터 포인트의 값을 향해 확장되는 직사각형 모음을 사용하여 표현됩니다. 바 차트은 다음과 매우 유사합니다. 기둥 차트와 매우 유사하지만 바 차트는 시계 방향으로 90도 회전하여 렌더링되므로 가로 방향(왼쪽에서 오른쪽)을 가지지만 기둥 차트은 세로 방향(위아래)을 갖습니다.

    React Bar Chart Example

    아래 예제와 같이 데이터 소스를 여러 IgrBarSeries에 바인딩하여 IgrDataChart 컨트롤에서 React 바 차트 만들 수 있습니다.

    Bar Chart Recommendations

    Are React Bar Charts right for your project?

    React 바 차트 데이터를 기반으로 한 여러 변형 또는 데이터로 올바른 스토리를 전달하려는 방법이 포함되어 있습니다. 여기에는 다음이 포함됩니다.

    • 그룹화된 바 차트
    • 누적 바 차트
    • 극 막대 바 차트
    • 누적 100 바 차트

    Bar Chart Use Cases

    바 차트 선택하는 데는 몇 가지 일반적인 사용 사례가 있습니다.

    • 시간에 따른 추세나 데이터 범주의 숫자 값 변화를 표시해야 합니다.
    • 1개 이상의 데이터 계열의 데이터 값을 비교해야 합니다.
    • 부분 대 전체 비교를 표시하려고 합니다.
    • 카테고리의 상위 또는 하위 비율을 표시하려고 합니다.
    • 하위 카테고리(누적 막대)로 그룹화된 여러 데이터 포인트를 분석합니다.

    이러한 사용 사례는 일반적으로 다음 시나리오에 사용됩니다.

    • 영업관리.
    • 재고 관리.
    • 주식 차트.
    • 숫자 값 또는 시계열 값을 비교하는 문자열 값입니다.

    Bar Chart Best Practices:

    • 숫자 축을 0에서 시작합니다.
    • 막대에는 단일 색상을 사용하십시오.
    • 각 막대를 분리하는 공간이 막대 자체 너비의 1/2인지 확인하십시오.
    • 순위 지정 또는 비교 순서가 지정된 범주(항목)가 오름차순 또는 내림차순으로 정렬되어 있는지 확인하세요.
    • 가독성을 위해 범주 값을 Y축(차트의 왼쪽 레이블)에 오른쪽 정렬합니다.

    When Not to Use Bar Chart

    • 데이터가 너무 많아서 Y축이 공간에 맞지 않거나 읽을 수 없습니다.
    • 자세한 시계열 분석이 필요합니다. 이러한 유형의 데이터에 대해 시계열이 포함된 선형 차트 고려하세요.

    Bar Chart Data Structure:

    • 데이터 소스는 데이터 항목의 배열 또는 목록이어야 합니다.
    • 데이터 소스에는 데이터 항목이 하나 이상 포함되어 있어야 합니다.
    • 목록에는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어야 합니다.
    • 목록에는 숫자 데이터 열이 하나 이상 포함되어야 합니다.

    React Bar Chart with Single Series

    바 차트 카테고리 시리즈 그룹에 속하며 차트의 왼쪽에서 오른쪽으로 데이터 포인트 값을 향해 확장되는 직사각형 모음을 사용하여 렌더링됩니다. 아래 예제와 같이 데이터를 IgrBarSeries에 바인딩하여 IgrDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

    React Bar Chart with Multiple Series

    바 차트 비교 목적으로 범주별로 여러 막대를 렌더링할 수 있습니다. 이 예에서 바 차트 인기 영화 프랜차이즈 간의 박스오피스 수익을 비교합니다. 아래 예제와 같이 데이터를 여러 IgrBarSeries에 바인딩하여 IgrDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

    React Bar Chart Styling

    바 차트 스타일을 지정할 수 있으며, 예를 들어 백분율 비교를 보여주기 위해 각 막대에 주석 값을 사용하는 기능을 허용합니다. 아래 예제와 같이 데이터를 IgrBarSeries에 바인딩하고 IgrCalloutLayer를 추가하여 IgrDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

    React Stacked Bar Chart

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

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

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

    React Stacked 100% Bar Chart

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

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

    Additional Resources

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

    API References

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