Billboard.js 무료 네이버 차트 라이브러리 써보기

billboard.js는 D3 기반의 자바스크립트 차트 라이브러리입니다.

아주 간단하게 차트를 만들 수 있습니다. billboard.js의 홈페이지에서는 사용법이 잘 정리되어 있습니다 1. 또한, 다양한 예제들도 참고할 수 있습니다 2.

 

이전에 작성한 여기도 한번 방문해 보세요.

JS – billboard 차트 라이브러리 써보기

JS - billboard 차트 라이브러리 써보기 - B로그0간

billboard.js를 사용하기 위해서는 D3.js와 billboard.js를 로드해야 합니다. 그리고 차트를 넣을 HTML 요소를 만들고, 차트 옵션을 설정하여 차트를 생성하면 됩니다 1.

예제 코드는 다음과 같습니다:

<!-- 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">

<!-- Step 2. Setup your chart holder -->
Sample code
<div id="areaChart"></div>

<!-- Step 3. Generate a chart with options -->
<script>
var chart = bb.generate({
  data: {
    columns: [
	["data1", 300, 350, 300, 0, 0, 0],
	["data2", 130, 100, 140, 200, 150, 50]
    ],
    types: {
      data1: "area", // for ESM specify as: area()
      data2: "area-spline", // for ESM specify as: areaSpline()
    }
  },
  bindto: "#areaChart"
});
</script>

billboard.js 예제

billboard.js의 예제들은 다양합니다. billboard.js의 홈페이지에서는 다양한 차트 유형들의 예제들을 제공하고 있습니다. 

예를 들어, Area, Bar, Bubble, Donut, Gauge, Line, Pie, Polar, Radar, Scatter 등의 차트 유형들이 있습니다

 

도넛 차트 예제를 만들어 봤어요. 아래글도 봐주세요.

2023.05.02 - [IT/Web] - Billboard.js 차트 라이브러리 - 도넛 차트 예제

Billboard.js 차트 라이브러리 - 도넛 차트 예제