Vẽ đồ thị sử dụng C3Js

Các bước sử dụng thư viện C3Js để vẽ đồ thị

Bước 1: Download thư viện C3Js mới nhất: [https://github.com/c3js/c3/releases/latest]

Load các thư viện css và js cần thiết
<!-- Load c3.css -->
<link href="/path/to/c3.css" rel="stylesheet">

<!-- Load d3.js and c3.js -->
<script src="/path/to/d3.v3.min.js" charset="utf-8"></script>
<script src="/path/to/c3.min.js"></script>
Note: Cần phải tải và cài đặt thư viện D3Js trước vì C3Js được viết trên D3Js

Bước 2: Tạo đồ thị

Tạo một element chứa đồ thị(Nơi đồ thị hiển thị)
vd: <div id="chart"></div>
Tạo đồ thị sử dụng phương thức generate()

var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});

Ở đây ta chú ý đến 1 số điểm sau:

• bindto: Chỉ ra đồ thị được vẽ ở đâu( Trong vd là thẻ div có id="chart")
• data: chứa data mà ta dùng để vẽ đồ thị
• columns: Tương ứng là các đường hoặc cột trong đồ thị

Bước 3: Custom Đồ thị theo ý muốn

1. Additional Axis:

• Thêm 1 trục Y trong đồ thị

var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
axes: {
data2: 'y2' // ADD
}
},
axis: {
y2: {
show: true // ADD
}
}
});

• Ở đây ta thêm một trục y2 với data là data2