네이버에서 만든 웹에서 그래프를 표현하기 좋은 라이브러리입니다. 티스토리 스킨에도 적용할 수 있습니다.
공식 사이트 naver.github.io/billboard.js
Git github.com/naver/billboard.js
문서 페이지 naver.github.io/billboard.js/release/latest/doc
Step 1. D3.js와 billboard.js 불러오기
> 홈페이지 하단에 보이는 billboard.js 와 billboard.css를 다운받아 [스킨 > 파일 업로드]에 올립니다.
> 다음을 Html <head>부분에 붙여넣습니다.
> 다른 테마를 적용하고 싶으면 테마 파일도 다운 받아서 올립니다.
<!-- billboard.js -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<link rel="stylesheet" href="./images/billboard.css">
<script src="./images/billboard.js"></script>
<link rel="stylesheet" href="./images/datalab.min.css"> // 테마파일Step 2. DIV 홀더 지정
블로그에 글을 쓸 때 HTML 모드로 전환하여 다음 홀더를 작성합니다.
<div id="chart"></div>Step 3. 스크립트 작성
바로 아래 스크립트로 된 차트를 입력합니다.
<script>
var chart = bb.generate({
bindto: "#chart",
data: {
type: "bar",
columns: [
["data1", 30, 200, 100, 170, 150, 250],
["data2", 130, 100, 140, 35, 110, 50]
]
}
});
</script>차트 작성이 어려우면 다음 사이트의 도움을 받으면 됩니다.
샘플 페이지 naver.github.io/billboard.js/demo/#Data.DataFromURL
그래프 생성기 naver.github.io/billboard.js/playground/
그래프 예시
댓글