c3p v0.0.0

C3+

C3+는 SVG 기반의 차트 라이브러리인 C3.js를 확장해 테마 형태의 디자인된 차트를 손쉽게 생성할 수 있도록 도와주는 라이브러리 이다.

• Homepage: https://pages.oss.navercorp.com/chart/c3p/
• API 문서: https://pages.oss.navercorp.com/chart/c3p/use_api.html
• 개발 가이드: https://pages.oss.navercorp.com/chart/c3p/guide_develop_extension.html
• Playground: https://pages.oss.navercorp.com/chart/c3pPlayground/
• Demo:
  • academic 테마: 데스크탑 / 모바일
  • datalab 테마: 모바일
  • insight 테마: 데스크탑 / 모바일
  • land 테마: 데스크탑
  • sports 테마: 모바일

C3.js를 기반으로 하기 때문에 C3.js의 기존 옵션들을 그대로 사용할 수 있으며, C3+ 만의 확장된 옵션을 통해 보다 세밀한 UI 커스터마이징이 가능 하도록 도와준다.

다운로드

최신버전은 https://oss.navercorp.com/chart/c3p/tree/gh-pages/release/latest/ 에서 다운로드 할수 있다.

특정 버전: https://oss.navercorp.com/chart/c3p/tree/gh-pages/release/[VERSION]/

• C3+: uncompressed, minified
• C3+ 의존성(D3,C3) 패키징 버전: c3p.pkgd.min.js
• 테마파일: c3p-theme.zip

특징

• 커스텀 축 지원: DOM 형태의 커스텀 축 생성을 통해 자유로운 디자인 스타일링을 지원

• 범례 템플릿 지원: 마크업 템플릿을 통한 간편한 범례 생성

• 모바일 지원

  • 터치 및 드래그를 통한 데이터 선택 지원
  • 가로/세로 모드 전환을 통한 자동 resize 지원

• 테마를 통한 차트 생성: 다양하게 디자인된 테마를 통해 원하는 형태의 차트 UI를 빠르게 생성

• 확장된 파이 유형 기능

  • donut 유형에서 title 줄 바꿈 지원
  • 데이터 값이 0인 경우, 비어있는 데이터 표현

• 확장 옵션 지원: C3.js 옵션에서 제공되지 않았던 기능들을 별도의 확장 옵션을 통해 제공

Browser Support

C3+는 다음의 브라우저 환경에서 사용이 가능하다.

• 일부 브라우저 및 환경에 따라 모든 기능이 지원되지 않을 수도 있으나, SVG를 지원하는 브라우저라면 기본적으로 사용이 가능하다.

의존성

C3+는 다음의 라이브러리들에 대한 의존성을 가지고 있다.

빌드방법

빌드를 위해 다음의 작업들을 순차적으로 수행한다.

# 1) 디렉토리 생성 및 클론
$ git clone https://oss.navercorp.com/chart/c3p.git

# 2) node 의존성 모듈 설치 및 빌드
$ npm install && npm run build:prod

• 빌드가 정상적으로 완료되면 ./dist 폴더에 다음과 같은 파일들이 생성된다. :

사용방법

1) 파일 로딩

jQuery를 먼저 로딩 후, D3.js, C3.js 그리고 C3+ 파일을 로딩한다.

<!-- 1) 의존성 및 C3+ 로딩 -->
<!-- 1-1) 모든 의존성(D3.js, C3.js) 파일들이 패키징된 c3p.js를 로딩 -->
<script src="dist/c3p.pkgd.min.js"></script>

<!-- 1-2) 또는 개별적으로 로딩-->
<script src="node_modules/d3/d3.js"></script>
<script src="node_modules/c3/c3.js"></script>
<script src="dist/c3p.js"></script>

<!-- 2) 테마 파일 로딩 -->
<link href="dist/theme/insight/insight.desktop.css" rel="stylesheet">
<script src="dist/theme/insight/insight.js"></script>

2) 차트 영역 정의

<!-- chart holder-->
<div id="chart"></div>

3) 차트 생성

var chart = c3p.generate("#chart", "insight.line1", {
	data: {
	    columns: [
	        ['x', '2015-11-02', '2015-12-01', '2016-01-01', '2016-02-01', '2016-03-01'],
	        ['재방문율', 11, 8, 7, 6, 5 ],
	        ['재방문자', 9, 3, 6, 2, 8 ]
	    ]
	}
});

기술지원

모든 문의사항과 버그 등은 issues page 페이지에 등록한다.