19/10/2019, 10:43

Liệu chúng ta có yêu ChartJs được không?

Chartjs là một thư viện khá hay ho về hỗ trợ vẽ biểu đồ. Tuy đã có một số bài viết về chủ đề này, nhưng mình vẫn muốn viết tiếp. Và để bớt trùng lặp, trong bài viết này, mình sẽ chỉ viết về cách sử dụng chartjs trong Vue . (Thực ra là mình cũng mới chỉ thực hành được với Vue thôi ...

Chartjs là một thư viện khá hay ho về hỗ trợ vẽ biểu đồ. Tuy đã có một số bài viết về chủ đề này, nhưng mình vẫn muốn viết tiếp. Và để bớt trùng lặp, trong bài viết này, mình sẽ chỉ viết về cách sử dụng chartjs trong Vue. (Thực ra là mình cũng mới chỉ thực hành được với Vue thôi ????)

1. Cài đặt

hoặc

2. Chart Template

Trong đó <TYPE_CHART> là kiểu biểu đồ bạn muốn tạo. Theo source của chartjs thì chúng ta có các loại biểu đồ sau:

Về tham số truyền vào. Quan sát template, bạn có thể thấy được, props truyền vào bao gồm 2 tham số:

  • chartData: Dữ liệu để vẽ biểu đồ, bao gồm, tên bảng, các nhãn (label), các số liệu (dataset) và màu tương ứng,…
  • options: Các tham số tùy chỉnh cho việc vẽ biểu đồ.

Tham số chartData

Data thường là một json, có các tham số cần chú ý là:

  • labels: Danh sách nhãn
  • datasets:
    • label: Tên chú thích cho nhãn
    • data: Số liệu để vẽ biểu đồ
    • backgroundColor: Màu/Danh sách màu sử dụng để vẽ biểu đồ

Ví dụ:

Tham số options

Tương tự như chartData, options cũng là một json. Một số options thường hay được sử dụng bao gồm:

  • layout: Tùy chỉnh padding, nhận một number/object
  • scales: tùy chỉnh cho 2 trục của biểu đồ, bao gồm xAxes và yAxes.

Mình sẽ nói phần này rõ hơn trong ví dụ ở mục 3.

  • legend: tùy chỉnh về chú giải
Tên KIểu Mặc định Mô tả
display Boolean true Hiển thị hay không
position string ‘top’ có 4 kiểu: ‘top’, ‘left’, ‘bottom’, ‘right’
onClick function Định nghĩa callback được thực hiện khi click vào chú thích
onHover function Định nghĩa callback được thực hiện khi di chuột vào chú thích
labels object Style cho chú thích như font, size, color,… Chi tiết

Tìm hiểu thêm về Legend tại: https://www.chartjs.org/docs/latest/configuration/legend.html

  • title: tùy chỉnh tên bảng
Tên KIểu Mặc định Mô tả
display Boolean true Hiển thị hay không
position string ‘top’ có 4 kiểu: ‘top’, ‘left’, ‘bottom’, ‘right’
text string/string[] Tên biểu đồ. Nếu dữ liệu truyền vào là một string[], mỗi phần tử sẽ được hiển thị trên 1 dòng

Ngoài ra còn có các tham số để style cho title như: fontSize, fontFamily, fontColor, fontStyle, padding, lineHeight. Chi tiết xem tại: https://www.chartjs.org/docs/latest/configuration/title.html

Ví dụ:

  • tooltips: tùy chỉnh cho chú thích khi hover vào mỗi nhãn
Tên KIểu Mặc định Mô tả
enabled Boolean true Hiển thị hay không
custom function Custom lại tooltips theo cách mà bạn muốn. Chi tiết
mode string ‘nearest’ Cài đặt phần tử xuất hiện tooltips, gồm: ‘nearest’,
intersect Boolean true Nếu true, tooltips sẽ xuất hiện khi di chuột, ngược lại, tooltips luôn được hiển thị
position string ‘average’ Chế độ định vị tooltips, gồm average và nearest
callback function Cấu hình lại nhãn của tooltips. Chi tiết

Ngoài ra, còn có các tham số để style tooltips. Chi tiết

Ví dụ:

3. Một số ví dụ

Line

Bar

Một số tham số

  • scales:
Tham số Kiểu Mặc định Mô tả
display Boolean true Có hiển thị trục đồ thị hay không
beginAtZero Boolean false Trục bắt đầu từ gốc tọa độ (0, 0)
minBarLength Number Độ dài nhỏ nhất cho 1 cột của biểu đồ cột (Bar)

Chi tiết

  • responsive: Biểu đồ có reponsive hay không?

Pie