billboard.js 관한 이전 포스트
오픈소스 차트 라이브러리 billboard.js
코로나가 터지면서 많은 개발자들이 코로나 현황과 정보를 실시간으로 보여주기 위해 사이트를 개발했습니다. 코로나 현황을 보여주다보면 전일대비 얼마나 확진자가 증가했는지 등 한눈에 파
wooncloud.tistory.com
billboard.js 링크
billboard.js
billboard.js, the "chart" library The name "billboard" comes from the famous "billboard chart" which everybody knows. billboard.js provides the easiest way to create a 'chart' instantly. Quick Start Guide Step 1. Load billboard.js and D3.js Step 2. Setup y
naver.github.io
네이버에서 만든 billboard.js는 기능이 엄청나게 많습니다.
이 기능들을 하나하나 찾아가면서 구현하기엔 시간이 많이 걸릴 수 있습니다.
이럴 때 친절하게도 몇 가지 파라미터를 설정해서 코드를 자동으로 만들 수 있는 사이트가 있습니다.
billboard.js playground
naver.github.io/billboard.js/playground/
billboard.js playground
naver.github.io
사용방법
- 미리보기 : 아래 Text Editor에 적힌 대로 구현된 모습입니다.
- 코드 에디터 (Text Editor) : 코드를 적을 수 있는 공간입니다.
- 데이터 테이블 : 클릭하면 테이블이 나오고 그곳에서 데이터를 편집할 수 있습니다.
- 파라미터 : 차트의 다양한 옵션들을 설정할 수 있는 파라미터입니다.
파라미터 창에서 '차트 타입'은 물론, '콜백 함수'도 선택하여 Text Editor에서 편집이 가능합니다.
파라미터에 어떤 기능이 있는지 쉽게 볼수 있고 조금씩 만져보며 미리보기 창에 어떻게 바뀌는지 눈으로 확인하면
해당 코드가 어떠한 기능을 하는지 알수 있습니다.
어떻게 사용할지 막연하면 플레이그라운드에서 만져보면서 익히면 수월할 수 있습니다.
그럼 즐코하세요~!
'개발 아카이브 > 라이브러리' 카테고리의 다른 글
| 더미 이미지가 필요할 땐, 로렘 픽숨 (Lorem Picsum) (0) | 2022.05.21 |
|---|---|
| [자바스크립트] 쉽게 문자열 처리하기 - Voca.js (0) | 2021.01.10 |
| 자바스크립트 날짜 포맷 설정하기 - moment.js 라이브러리 (1) | 2020.12.23 |
| 웹에서 그래프를 만들자! - 오픈소스 차트 라이브러리 billboard.js (0) | 2020.12.22 |
| [자바스크립트] Date Range Picker : 기간 날짜 라이브러리 (2) | 2020.10.28 |