Bar

막대 차트는 Bar를 이용해 제작한다. 해당 모듈은 Bar 타입을 그대로 노출하는 대신에 Bar 인스턴스를 생성하는 함수를 반환한다. 클라이언트 단에서 전체 모듈을 번들링한 형태로 사용할 때는 daisy.bar()를 실행하여 Bar 인스턴스를 생성한다. 모듈별로 사용할 때에는 아래와 같이 bar 모듈만을 불러와서 사용해도 좋다.

Bar 타입은 RectLinear 타입을 상속받는다.

import bar from 'daisy-chart/src/layouts/bar'
bar().container('#chart-container')
  .data(dataset)
  .dimensions(['category', 'sub-category']) // 2개의 dimension을 사용하므로 그룹 바챠트 생성
  .measures([{field: 'value', op: 'sum'}])
  .axis('x').axis('y')
  .render();

막대 차트의 유형은 범주(dimension), 수치(measure)의 조합과 형태 변형을 위한 옵션에 의해 형태가 결정된다. 그 예시는 아래와 같다.

범주 1개
- 수치 0개: 범주의 값에 따라 데이터 요소 개수를 세서(count) 그 값을 수치로 사용하는 모노 막대 차트
- 수치 1개: 범주에 따라 막대를 생성하고, 수치로 길이를 정하는 모노 막대 차트
- 수치 2개 이상: 범주에 따라 영역(Region)을 나누고, 수치의 개수에 따라 영역내에 막대를 위치시키는 그룹 막대 차트

범주 2개
- 수치 0개: 범주의 값에 따라 개수를 세서 그 값을 수치로 사용하는 모노 막대 차트
- 수치 1개: 첫번째 범주에 따라 영역(Region)을 나누고, 두번째 범주로 영역 내 막대의 위치를 결정하는 그룹 막대 차트
누적
- .stacked(true) : 첫번째 범주로 막대의 위치를 결정하고, 두번째 범주로 색상과 쌓이는 순서를 결정하는 누적 막대 차트, 범주나 수치가 2개 이상인 경우에만 작동한다.
스몰 멀티플
- .facet(true) : 첫번째 범주로 막대의 위치를 결정하고, 두번째 범주로 영역을 분리하는 스몰멀티플 형태의 다수의 모노 막대 차트, 범주나 수치가 2개 이상인 경우에만 작동한다.

API Reference

# bar.annotation([annotation]) <>

막대 끝을 가리키는 보조선을 출력 여부를 annotation 값의 true|false 결정한다. 기본 설정값은 false이다.

# bar.normalized([normalized]) <>

누적 막대 설정시 값을 모두 0–1.0 사이의 값으로 정규화 하여 변환한다. bar.stacked가 true인 경우에만 작동한다. 기본 설정값은 false이다.

bar.stacked(true)
  .normalized(true);

# bar.mono([mono]) <>

범주가 1개이고 수치가 1개 이하인 경우의 모노(Mono) 막대 차트의 색상을 동일하게 설정할지 여부를 mono 값의 true|false로 결정한다. 기본 설정값은 true이며 이때 모노 막대 차트의 색상은 default.color의 colors 값의 첫번째 값이 사용된다.

bar.dimensions(['category'])
  .mono(false);

# bar.orient([orient]) <>

막대 차트가 그려지는 방향을 orient 값을 vertical|horizontal로 설정하여 변경한다. 기본 설정 값은 vertical이며 세로로 그려진다.

# bar.padding([padding]) <>

막대 사이의 간격(padding)의 비율을 설정한다. 비율의 산정 방식은 d3.scaleBand.padding의 규칙을 따른다. 기본 설정값은 0.05 이다.

# bar.stacked([stacked]) <>

누적 막대 여부를 stacked 값의 true|false로 설정한다. 기본 값은 false이다.

# bar.showdiff([showdiff]) <>

모노 막대 차트의 크기 비교 표시를 showdiff 값의 true|false로 설정한다. 기본 값은 false이다. true 인 경우 첫번째 막대 이후 막대는 이전 막대와의 차이를 점선과 레이블로 표시하게 된다.

# bar.regionPadding([regionPadding]) <>

그룹 막대 사용시 영역(region) 사이의 간격(regionPadding)의 비율을 설정한다. bar.facet이 활성화되어 스몰 멀티플을 그릴 경우 영역 간의 간격 비율을 설정한다. 비율의 산정 방식은 d3.scaleBand.padding의 규칙을 따른다. 기본 설정값은 0.1 이다.