Hướng dẫn dùng charjs JavaScript
Show Giới thiệuĐây là một template sử dụng Chart.js https://colorlib.com/polygon/gentelella/index.html, chắc hẳn các bạn cũng như mình đều sẽ thấy giao diện chart trong trang web của họ rất hiện đại và dễ hiểu. Đấy là nhìn về mặt giao diện, còn về mặt coding, ta cũng rất dễ dàng để tạo ra được những biểu đồ như thế, nhờ Chartjs. Chỉ cần vài tiếng đồng hồ là bạn có thể sử dụng thư viện này 1 cách thuần thục rồi. Để các bạn không mất thời gian đọc docs thì hôm nay mình xin giới thiệu cơ bản về Chartjs để các bạn có thể áp dụng vào trang web của mình. Download/InstallationCó 2 cách để các bạn có thể sử dụng Chart.js đó là:
Ứng dụng demo của mình sử dụng Laravel 5.4 và npm thế nên mình chọn cách cài đặt qua npm như trên. Sau khi cài đặt bạn cần phải sử dụng
rồi sau đó chạy lệnh
Vậy là hoàn tất quá trình cài đặt để sử dụng Chart.js. Rất đơn giản phải không! Mình xin phép viết 1 đoạn demo nhỏ kèm hình ảnh ngay trong file
Nhìn thì tưởng rắc rối nhưng thật ra rất đơn giản, bạn chỉ cần tạo 1 thẻ Cấu hình ChartChart DataĐể hiển thị được dữ liệu ra màn hình, chúng ta phải khai báo 1 object Chart chứa tất cả các thông tin cần thiết mà bạn muốn show ra. Dưới đây là một vài tham số cơ bản mà mình hay sử dụng:
Ở đoạn code trên của mình thì mình chỉ cần đặt labels là 1 mảng các nhãn được hiển thị ở trục Ox và các tham số bên trong datasets (vì biểu đồ của mình có 2 line nên mình khai báo 2 object bên trong datasets). Tạo chart với các Optionsoptions: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] }, Đoạn code trên của mình chỉ đơn giản là cho trục Oy của chart bắt đầu từ 0, còn nếu bạn không set giá trị này thì chart của bạn sẽ lấy mặc định bắt đầu từ số nhỏ nhất trong data mà bạn set. Đây là ví dụ đơn giản sử dụng options trong chart. Cấu hình globalNghe cái tên global thì chắc các bạn cũng hình dung được nhiệm vụ của việc cấu hình này, nó dùng để cấu hình cho tất cả các loại chart trong trang của bạn để mỗi khi thay đổi bạn khỏi phải tìm kiếm nó trong options ở từng chart. Nó không khác gì biến global sử dụng trong các ngôn ngữ lập trình. Chartjs hay ở chỗ là nếu bạn không xác định những tham số này, thì nó sẽ cho bạn các giá trị mặc định của từng loại biểu đồ và cân bằng chúng một cách hợp lí nhất. Việc bạn khai báo chỉ là bạn muốn thay đổi một giá trị mặc định nào đó. Như trong demo mình làm, mình có khai báo 2 giá trị global:
Đơn giản là mình sẽ thay đổi màu chữ và font chữ cho chart, và nó được áp dụng cho tất cả các loại chart khác nếu mình muốn vẽ thêm. Bạn có thể tham khảo bảng setting về font dưới đây để hiểu hơn:
Các cấu hình chung khác của ChartCác options dưới đây, các bạn có thể sử dụng được cho tất cả các loại Chart. Bạn có thể set nó thông qua global, hoặc viết nó bên trong options của từng Chart
Bài viết của mình khá dài rồi nên mình sẽ tiếp tục giới thiệu về Chart ở bài viết sau. Chú thích: Nguồn: https://viblo.asia/p/tim-hieu-ve-chartjs-Qbq5Qqvw5D8 Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây. Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm. |