JS – billboard 차트 라이브러리 써보기
#billboard.js #chart #js #라이브러리 #사용법
여러 개 찾아보다가, 좀 페이지가 덜 지저분하게 라인을 짧게 쓸수 있는 차트 라이브러릴 찾다가 빌보드차트를 건드려보기로 – D3 라이브러리 기반이라고 한다. d3js.org 도 참고하자.
홈페이지는 여기 : https://naver.github.io/billboard.js/
billboard.js
Re-usable easy interface JavaScript chart library, based on D3 v4+
](https://naver.github.io/billboard.js/)간단한 사용법
아주 간단하게 쓰는 방법을 정리해 보자. 그런데 메인 페이지에서 이미 쉽게 정리해서 알려주고 있다.
Step 1. Load billboard.js and D3.js
D3 차트 라이브러리를 기반으로 하니깐, 이것을 따로 다운로드 받고 링크하고, billboard.js 를 가져와서 제대로 동작한다.
<!-- Step 1) Load D3.js --><script src="https://d3js.org/d3.v6.min.js"></script><!-- Step 2) Load billboard.js with style --><script src="$YOUR_PATH/billboard.js"></script><!-- Load with base style --><link rel="stylesheet" href="$YOUR_PATH/billboard.css"><!-- Or load different theme style --><link rel="stylesheet" href="$YOUR_PATH/theme/insight.css">
테마가 있으니깐 2~3개 정도 나는 datalab theme를 사용하기로 따라서, 내가 실제로 적용한 코드는 아래와 같다.
D3.js 는 버전 6에서 가장 최신을 다운로드 받았다. https://github.com/d3/d3/releases/tag/v6.7.0
<script src="{% static 'vendor/d3/d3.min.js' %}"></script><script src="{% static 'vendor/billboard/billboard.min.js' %}"></script><link rel="stylesheet" href="{% static 'vendor/billboard/datalab.min.css' %}">
Step 2. Setup your chart holder
차트를 넣고 싶은 html에 아래와 같이 코드를 추가하고,
<div id="chart"></div>
Step 3. Generate a chart with options
<script>…</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] ] }});
Step 4. 옵션 좀 추가
실제 내가 작성한 코드는 아래와 같다. 박스 완료 수량을 표기하는 건데, boxcount 에서 box_done 만큼 완료되었는지 표시하는 막대 차트를 만들어 보았다.
결과 모양은,
다 기본으로 쓰면 되지만, 일단
title추가해서 차트 위에 표기axis:{rotated: true,}옵션으로 방향을 옆으로 보이게 수정- x 축 라벨 이나 텍스트를 표기 안하도록
show:false처리 - y 축 범위를 지정,
maxmin값 추가 - y 축 tick 에
count지정해서 1 씩 기준 선이 보이도록 수정, 여기서 주의할 점은 max+1 값을 지정해 둔다는 것! - y 축 숫자를 1씩 증가하면서 보여지도록
stepSize값 지정 - y축
padding지정하여 딱 붙여서 막대 그래프가 표현되도록 수정
var chart3 = bb.generate({ title: { text: "완료수량 {{ box_done }} / {{ boxcount }}" }, data: { columns: [ ["박스완료",{{ box_done }}], ], type: "bar", // for ESM specify as: bar() }, axis: { rotated: true, x: { tick: { show: false, text: { show: false } } }, y: { padding: { top: 0, bottom: 0 }, tick: { count: {{boxcount}}+1, stepSize:1, }, max:{{boxcount}}, min:0 } }, bindto: "#chart-container3"});
예제 제공 페이지
사실 예제를 보고 그냥 쉽게 따라할 수 있다. 그중에 나한테 맞는 걸 고르는 게 일이다.
billboard.js – examples
Examples of billboard.js. billboard.js is a re-usable easy interface JavaScript chart library, based on D3 v4+.