Combo

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

import combo from 'daisy-chart/src/layouts/combo'
combo().container('#chart-container')
  .data(dataset)
  .dimensions(['category'])
  .measures([{field: 'bar-val', op: 'sum'}, {field: 'line-val', op: 'mean'})
  .render();

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

• 범주 : 1개의 범주를 입력한다.
• 수치 : 2개의 수치를 입력하고, 각각 막대와 선차트를 그리는데 사용한다.

API Reference

# combo.curve([curve]) <>

선의 커브 형태를 지정한다. curve 값은 linear|stepped|curved 중 하나이며 기본 설정 값은 linear이다.

# combo.padding([padding]) <>

막대와 선의 앞뒤 여백(padding)의 비율을 설정한다. 비율의 산정 방식은 d3.scaleBand.padding의 규칙을 따른다. 기본 설정값은 0.05 이다.

# combo.point([point]) <>

point가 true인 경우, 시리즈 선 위에 데이터 포인트를 원의 형태로 표시한다. 기본 설정값은 false이다.

# combo.pointRatio([pointRatio]) <>

combo.point가 활성화 되었을 때 표시되는 원의 선 굵기 대비 반지름의 비율이다. 기본 설정값은 3이다.

# combo.size([size]) <>

선 굵기를 px 단위로 설정한다. 기본 값은 2이다.