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

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:

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