c3

chart visualization ui-component

c3는 D3 기반의 재사용 가능한 차트 라이브러리입니다. 사용자가 쉽게 데이터 시각화를 구현할 수 있도록 도와주며, 다양한 유형의 차트를 지원합니다. 간단한 API를 통해 차트를 빠르게 생성하고 커스터마이즈 할 수 있습니다.

Latest Ver 0.7.20

Homepage

Github

9,357

📢 D3 기반으로 다양한 차트를 쉽게 생성할 수 있는 라이브러리

CDN 다운로드

License: MIT

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.js

https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js

https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.css

https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 HTML
<div id='chart'></div>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>

⚙️ JavaScript
var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    }
});