node package manager
Love JavaScript? Your insights can make it even better. Take the 2017 JavaScript Ecosystem Survey »

c3p

C3+

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

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]/

특징

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

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

  • 모바일 지원

    • 터치 및 드래그를 통한 데이터 선택 지원
    • 가로/세로 모드 전환을 통한 자동 resize 지원
  • 테마를 통한 차트 생성: 다양하게 디자인된 테마를 통해 원하는 형태의 차트 UI를 빠르게 생성

  • 확장된 파이 유형 기능

    • donut 유형에서 title 줄 바꿈 지원
    • 데이터 값이 0인 경우, 비어있는 데이터 표현
  • 확장 옵션 지원: C3.js 옵션에서 제공되지 않았던 기능들을 별도의 확장 옵션을 통해 제공

Browser Support

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

Internet Explorer Chrome FireFox Safari iOS Android
9+ 최신 최신 최신 8+ 4.1.2+
  • 일부 브라우저 및 환경에 따라 모든 기능이 지원되지 않을 수도 있으나, SVG를 지원하는 브라우저라면 기본적으로 사용이 가능하다.

의존성

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

D3.js C3.js
<=3.5.0 0.4.11+

빌드방법

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

# 1) 디렉토리 생성 및 클론
$ git clone https://oss.navercorp.com/chart/c3p.git
 
# 2) node 의존성 모듈 설치 및 빌드
$ npm install && npm run build:prod
 
  • 빌드가 정상적으로 완료되면 ./dist 폴더에 다음과 같은 파일들이 생성된다. :
depth1 depth2 설명
./dist
c3p-theme.zip 모든 테마 압축파일 (테마는 별도 폴더로 생성)
c3p.js Uncompressed: 개발버전
c3p.min.js Compressed: 제품버전
c3p.pkgd.min.js Packaged: 모든 의존성(D3, C3) 파일들이 패키징된 버전

사용방법

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 페이지에 등록한다.