반응형
billboard.js 란?
네이버의 오픈소스 Javascript 차트 이다
{% quote naver https://github.com/naver/billboard.js %}
📊 Re-usable, easy interface
JavaScript chart library based on D3.js
{% endquote %}
깃허브에서 소스를 확인할 수 있다
billboard.js
사용법
라이브러리 import
가져다 사용하기만 할 꺼니
D3 라이브러리 가 이미 있으면
- CSS : https://naver.github.io/billboard.js/release/latest/dist/billboard.min.css
- Javascript : https://naver.github.io/billboard.js/release/latest/dist/billboard.min.js
D3 라이브러리가 없으면 - CSS : https://naver.github.io/billboard.js/release/latest/dist/theme/datalab.min.css
- Javascript : https://naver.github.io/billboard.js/release/latest/dist/billboard.pkgd.min.js
테마가 3종이 있지만 datalab 이 그나마 보기 좋다
소스에 차트 추가
chart 용 div 태그를 추가하고 (해당 id 를 기억하고 있다가)
<div id="chart123"></div>script 에서 bindto 로 chart div 를 지정해주면 된다
<script>
var chart = bb.generate({
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 130, 100, 140, 200, 150, 50]
],
type: "bar"
},
bar: {
width: {
ratio: 0.5
}
},
bindto: "#chart123"
});
</script>사용예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Billboard 테스트</title>
<link rel="stylesheet" href="https://naver.github.io/billboard.js/release/latest/dist/theme/datalab.min.css">
<script src="https://naver.github.io/billboard.js/release/latest/dist/billboard.pkgd.min.js"></script>
</head>
<body>
<div id="barChart"></div>
<script>
var chart = bb.generate({
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 130, 100, 140, 200, 150, 50]
],
type: "bar"
},
bar: {
width: {
ratio: 0.5
}
},
bindto: "#barChart"
});
setTimeout(function() {
chart.load({
columns: [
["data3", 130, -150, 200, 300, -200, 100]
]
});
}, 1000);
</script>
</body>
</html>반응형
'IT > Hexo' 카테고리의 다른 글
| 개발자들을 위한 블로그 플랫폼 정리 (2023/10 기준) (0) | 2023.10.26 |
|---|---|
| 네이버 Billboard.js 캔들차트 DataURL 사용법 (0) | 2022.07.04 |
| 검색엔진(네이버,구글)에 검색 잘되게 하는 방법 (0) | 2022.07.04 |
| Hexo 대소문자 인식 오류 문제 해결방법 (0) | 2022.07.04 |
| HEXO 링크 클릭시 전체화면으로 띄우기 (0) | 2022.07.04 |
| Hexo 에 나만의 스크립트(script)를 만들기 (0) | 2022.07.04 |
| 헥소(Hexo) 에 네이버 billboard 차트 추가 (0) | 2022.07.04 |
| 헥소(Hexo) 에 차트 추가 (0) | 2022.06.30 |
