기둥 차트

기둥 차트가 같고 높이가 다른 세로 막대로 인코딩된 데이터를 사용하여 다양한 범주에 있는 데이터의 빈도, 개수, 합계 또는 평균을 빠르게 비교하는 데 사용되는 가장 일반적인 차트 유형 중 하나입니다. 시간이 지남에 따라 품목 가치의 변화를 보여주는 데 이상적입니다. 데이터는 데이터 포인트 값을 향해 차트의 아래쪽에서 위쪽으로 확장되는 직사각형 모음을 사용하여 표시됩니다. 기둥 차트 시각적으로 다음과 동일합니다. 각진 기둥 차트 구성 요소 Ignite UI for Angular

Column Chart Demo

기둥 차트 Title, 기본적으로 숨겨져 있는 Legend, 유휴 상태 및 마우스 오버 상태에서 사용할 수 있는 Chart Area으로 구성됩니다.

Title

기둥 차트 필요하지 않은 경우 변경하거나 숨길 수 있는 제목이 있습니다. Figma 에서는 Title 부울 속성을 꺼서 제목을 숨길 수 있으며 자동 레이아웃 기능 덕분에 차트의 레이아웃이 그에 따라 자동으로 조정됩니다. Sketch 에서는 제목을 ~No Symbol로 설정하여 제목을 숨길 때 스마트 레이아웃이 이에 따라 차트를 조정합니다. Adobe XD에서는 제목 레이어를 삭제하고 스택에 그대로 두어 그에 따라 레이아웃을 업데이트함으로써 동일한 결과를 얻을 수 있습니다.

State

기둥 차트 유휴 상태와 마우스오버 상태라는 두 가지 상태가 있습니다. Figma 에서는 레이어 패널에서 중첩된 차트 영역 구성 요소를 선택하고 속성 패널에서 부울 연산 "호버 도구 설명"을 켜거나 끄는 방식으로 두 상태 사이를 전환할 수 있습니다. Sketch 에서는 Symbol Overrides 통해 이를 달성하는 반면, Adobe XD에서는 Component States 패러다임을 사용하여 상태 간을 쉽게 전환할 수 있습니다. 호버 상태에서는 데이터 포인트 위로 마우스를 가져가면 도구 설명이 표시됩니다. 그런 다음 초점이 맞춰지고 다른 열은 흐리게 표시됩니다.

Y-Axis

세로 막대형 차트의 Y축은 제목, 레이블, 축 자체로 구성됩니다. 제목과 레이블은 구성 가능하며 Figma의 레이어 패널에서 간단히 선택하고 숨기거나 Sketch에서 ~No Symbol로 재정의를 설정하여 레이블을 숨길 수 있습니다. Adobe XD에서는 레이어를 삭제해야 합니다. 색상을 Transparent으로 설정하여 축 선을 숨길 수 있으며 모든 요소를 한 번에 숨기려면 Figma의 레이어 패널에서 중첩된 Y축 구성 요소를 숨기거나 Sketch에서 Y축 재정의를 ~No Symbol로 변경하거나 레이어를 삭제할 수 있습니다. 어도비 XD.

Gridlines

기둥 차트 에는 Y축 값에 대한 데이터 포인트를 시각적으로 더 쉽게 추적할 수 있도록 눈금선이 내장되어 있습니다. Figma 에서는 중첩된 차트 영역 구성 요소를 선택하고 속성 패널에서 부울 속성 "격자선"을 켜거나 끄는 방식으로 차트를 표시하거나 숨길 수 있습니다. Sketch 및 Adobe XD에서 숨기려면 색상을 Transparent로 설정하세요.

Data Points

기둥 차트의 데이터 포인트는 Figma의 자동 레이아웃, Sketch의 스마트 레이아웃 또는 Adobe XD의 스택으로 배열된 개별 열로, 차트 영역에서 해당 양을 쉽게 조정할 수 있습니다. Figma 에서는 열 높이 프레임을 선택하고 속성 패널에서 항목 사이의 수직 간격을 조정하여 열 높이를 쉽게 조정할 수 있습니다. 또한 열에는 X축에 구성 가능한 레이블과 주석 레이블이 함께 제공됩니다.

스타일링

무엇보다도 기둥 차트 하면 계열의 색상을 변경할 수 있습니다. series.1, series.2 등으로 series.10까지 명명된 뉘앙스가 있는 데이터 시각화에는 팔레트의 색상만 사용하는 것이 좋습니다. 또한 수직 및 수평 축의 색상, 눈금선, 차트 영역 배경 및 테두리 색상을 변경할 수도 있습니다. 제목, 라벨, 주석 값 등도 Indigo.Design 시스템에서 사용 가능한 텍스트 스타일을 통해 사용자 정의할 수 있습니다.

Usage

일정 기간 동안의 변화량을 표시하려면 기둥 차트 사용하세요. 데이터가 잘못 표시되는 것을 방지하려면 항상 숫자 축을 0에서 시작하십시오. 또한, 동일한 카테고리에 다른 색상을 사용하지 마세요. 카테고리의 변화를 나타내기 위해 날짜나 월과 같은 시간을 참조하는 경우 항상 가로 축에 설정해야 합니다. 눈금선에 미묘한 색상을 사용하여 차트를 눈으로 보기 쉽게 만듭니다. 보다 자세한 시계열 시각적 개체가 필요한 경우 대신 선형 차트 사용하는 것이 좋습니다.

하다	하지 않다