selfstarter

billboard.js 예제 본문

Web/Javascript

billboard.js 예제

selfstarter 2020. 8. 10. 18:15

billboard.js 예제

 

공식 사이트에 있는 대로 하면 쉽게 billboard.js 예제를 만들 수 있다.

https://naver.github.io/billboard.js/

 

billboard.js

billboard.js, the "chart" library The name "billboard" comes from the famous "billboard chart" which everybody knows. billboard.js provides the easiest way to create a 'chart' instantly. Quick Start Guide Step 1. Load billboard.js and D3.js Step 2. Setup y

naver.github.io

cmd창에서 npm 명령어 실행

nodejs가 안깔려 있으면 설치할 것

npm install billboard.js

 

Sample Code

아래는 공식 getStarted 예제. 보는대로 사용법이 간단하다

type은 보여주는 차트의 타입인데 line, bar, area-spline 등으로 나타낼 수 있다.

현재는 여러개의 데이터가 동일한 타입으로 보여주지만 types property를 선언하여 각 데이터마다

다른 type으로 데이터를 보여줄 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<!-- Step 1) Load D3.js -->
<script src="https://d3js.org/d3.v5.min.js"></script>

<!-- Step 2) Load billboard.js with style -->
<script src="<npm download src>\node_modules\billboard.js\dist\billboard.js"></script>

<!-- Load with base style -->
<link rel="stylesheet" href="<npm download src>\node_modules\billboard.js\dist\billboard.css">

<!-- Or load different theme style -->
<link rel="stylesheet" href="<npm download src>\node_modules\billboard.js\dist\theme\insight.css">

<script>
$(function(){
  var chart = bb.generate({
    bindto: "#chart",
    data: {
        type: "line",
        columns: [
            ["data1", 10, 20, 100, 170, 150, 250],
            ["data2", 10, 100, 120, 35, 110, 50],
            ["data3", 20, 50, 160, 10, 50, 150]

        ],
		colors: {
			data1:"red",
			data2:"00ffff",
			data3:"green"			
		}
    }
});
})
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>

'Web > Javascript' 카테고리의 다른 글

JavaScript extend 함수 사용법  (0) 2020.08.11
JavaScript bind 사용법  (0) 2020.07.20
Javascript 다음 년도와 달 구하기  (0) 2020.06.17
ajaxForm jquery 예제  (0) 2020.06.15
Javascript copy paste 복사 붙여넣기 방지  (0) 2020.06.01
'Web/Javascript' Related Articles more
Comments