billboard.js를 이용해 얼마나 빠르고
쉽게 차트를 생성 할 수 있는지
직접 확인해 보세요!

Star

다양한 예제 보기

화면을 오른쪽에서
왼쪽 방향으로 넘겨 보세요.

←

Step 1

아래의 방법들 중 하나의 방법을
사용해 설치하실 수 있습니다.

1) npm

$ npm install billboard.js

2) CDN

3) GitHub에서 직접 다운로드

Step 2

필요한 파일들을 로딩 합니다. 

<!-- D3.js를 로딩 -->
<script src="d3.v5.min.js"></script>

<!-- billboard.js 로딩 -->
<script src="billboard.js"></script>

<!-- 스타일 파일을 로딩 -->
<!-- 기본 -->
<link href="billboard.css" rel="stylesheet">
<!-- 또는 테마 -->
<link href="dist/theme/insight.css" rel="stylesheet">

또는 ESM import도 가능합니다. 

import {bb} from "billboard.js";

Step 3

차트가 노출될 요소를 설정해 주세요.

<!-- 차트가 노출될 요소 -->
<div id="chart"></div>

Step 4: 미션수행

코드를 수정해 bar 유형 차트를 만드세요.
data.type 종류 보기 / 예제보기