Web Components 바 차트

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

Web Components Bar Chart Example

아래 예제와 같이 데이터 소스를 여러 IgcBarSeriesComponent에 바인딩하여 IgcDataChartComponent 컨트롤에서 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

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

Web Components Bar Chart with Multiple Series

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

Web Components Bar Chart Styling

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

Web Components Stacked Bar Chart

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

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

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

Web Components Stacked 100% Bar Chart

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

아래 예와 같이 데이터를 IgcStacked100BarSeriesComponent에 바인딩하여 IgcDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.

Additional Resources

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

API References

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