Web Components 바 차트

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

    Web Components Bar Chart Example

    아래 예시처럼 데이터 소스를 여러 번IgcDataChartComponent에 묶어 컨트롤에서IgcBarSeriesComponent Web Components 바 차트 생성할 수 있습니다:

    Bar Chart Recommendations

    Are Web Components Bar Charts right for your project?

    Web Components 바 차트 데이터 또는 데이터로 올바른 스토리를 전달하는 방법에 따라 여러 가지 변형이 포함됩니다. 여기에는 다음이 포함됩니다.

    • 그룹화된 바 차트
    • 누적 바 차트
    • 극 막대 바 차트
    • 누적 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

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

    Web Components Bar Chart with Single Series

    바 차트 카테고리 시리즈(Category Series) 그룹에 속하며, 차트의 왼쪽에서 오른쪽으로 데이터 포인트 값 쪽으로 뻗은 직사각형 모음을 사용하여 렌더링됩니다. 아래 예시처럼 데이터를 aIgcDataChartComponent에 묶어 컨트롤에서IgcBarSeriesComponent이 유형의 차트를 만들 수 있습니다:

    Web Components Bar Chart with Multiple Series

    바 차트은 비교 목적으로 카테고리별로 여러 개의 막대를 렌더링할 수 있습니다. 이 예시에서 바 차트는 인기 영화 프랜차이즈들 간의 박스오피스 수익을 비교하고 있습니다. 아래 예시처럼 데이터를 여러IgcDataChartComponent 번 할당하여 컨트롤에서IgcBarSeriesComponent이 유형의 차트를 만들 수 있습니다:

    Web Components Bar Chart Styling

    바 차트는 스타일링이 가능하며, 예를 들어 각 막대에 주 석 값을 사용하여 백분율 비교를 시연할 수 있습니다. 아래 예시처럼 데이터를 aIgcDataChartComponent에 묶고 aIgcBarSeriesComponent를 추가하면 컨트롤에서IgcCalloutLayerComponent이 유형의 차트를 만들 수 있습니다:

    Web Components Stacked Bar Chart

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

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

    아래 예시처럼 데이터를 aIgcDataChartComponent에 묶어 컨트롤에서IgcStackedBarSeriesComponent이 유형의 차트를 만들 수 있습니다:

    Web Components Stacked 100% Bar Chart

    Web Components 스택 100% 바 차트 X축(차트의 하단 레이블)의 값을 처리하는 것을 제외하고는 모든 면에서 Web Components 스택 바 차트와 동일합니다. 스택 100 막대 차트는 데이터를 직접 표현하는 대신 데이터 포인트의 모든 값 합계에 대한 백분율로 데이터를 표현합니다.

    아래 예시처럼 데이터를 aIgcDataChartComponent에 묶어 컨트롤에서IgcStacked100BarSeriesComponent이 유형의 차트를 만들 수 있습니다:

    Additional Resources

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

    API References

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