More Related Content Similar to [115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기 (13) [115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기27.
최소값y축 기반 값에 따른 up/down 표현
0 1 2 3 4
100,000
100,500
101,000
101,500
102,000
102,500
103,000
103,500
104,000
0 1 2 3 4
0
10,000
20,000
30,000
40,000
50,000
60,000
70,000
80,000
90,000
100,000
110,000
위의 차트는 모두 동일한 값을 표현하고 있습니다.
36. STEP 1
파일을 로딩 합니다.<!-- D3.js를 로딩 -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- billboard.js와 기본 스타일을 로딩 -->
<script src="billboard.js"></script>
<link rel="stylesheet" href="billboard.css">
38. STEP 3
옵션과 함께 차트를 생성합니다.
Declarative API
bb.generate({
bindto: "#chart",
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 100, 80, 130, 240, 350, 90],
["data3", 150, 120, 58, 135, 258, 159]
],
type: "bar",
colors: {
data1: "#2acefd",
data2: "#f87070",
data3: "#1f77b4"
},
labels: true
}
});
39. 짠!
bar line spline pie gauge area‑spline step donut scatter
30
200
100
400
150
250
100
80
130
240
350
90
150
120
58
135
258
159
0 1 2 3 4 5
0
50
100
150
200
250
300
350
400
450
data1 data2 data3