FrontEND/Javascript
c3.js 차트 사용법
mingmingIT
2017. 12. 1. 15:45
c3란? d3의 복잡한 차트 사용을 쉽게 사용할수 있게 모듈화를 한 d3기반 라이브러리 입니다.
사용법은 무척 간단합니다. 헤더부분에서 라이브러리를 import 하기만 하면 준비는 끝.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css"/>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
</head>
아래는 JSON 형식의 데이터를 받아와서 차트를 그리는 방법입니다.
c3js로 구현할수 있는 차트종류는 여러가지가 있지만 본문에서는 JSON데이터를 불러와서 활용해 보았습니다.
그리고 더 많은 차트는 아래 홈페이지에서 확인 가능합니다.