Xếp hạng của người biên tập: Xếp hạng của người dùng: [Tổng: 0 Trung bình: 0].ilfs_responsive_below_title_1 {width: 300px; } @media (min-width: 500px) {.ilfs_responsive_below_title_1 {width: 300px; }} @media (min-width: 800px) {.ilfs_responsive_below_title_1 {width: 336px; }}
Chartist là thư viện tạo biểu đồ SVG mã nguồn mở miễn phí mà người ta có thể sử dụng . Nó rất tiên tiến và hỗ trợ tạo ra rất nhiều biểu đồ với rất nhiều tham số. Với điều này, bạn có thể tạo các biểu đồ đầy màu sắc với bất kỳ kích thước nào và đưa chúng lên trang web của mình. Nó thậm chí còn hỗ trợ hoạt ảnh bằng cách sử dụng CSS và do đó với sự trợ giúp của thư viện này, bạn sẽ có thể tạo biểu đồ và đồ thị động.
Khi tạo trang tổng quan và trang web để hiển thị một số loại dữ liệu liên quan đến báo cáo, bạn cần có biểu đồ. Nhiều khi, chúng cần phải động hoặc tĩnh. Có những công cụ hiện có cho điều đó nhưng không giống như Chartist. Đây có lẽ là một trong những loại của nó. Nó đi kèm với một tài liệu rất chi tiết và các ví dụ rất hay để bạn có thể học cách tạo biểu đồ khá nhanh chóng.
Danh sách các loại biểu đồ được Chartist hỗ trợ:
Biểu đồ thanh (bao gồm cả xếp chồng và ngang) Biểu đồ đường Biểu đồ hình tròn Biểu đồ khu vực bánh rán Biểu đồ đo lường Biểu đồ phân tán đường biểu đồ Biểu đồ đường SVG hoạt hình Biểu đồ đường phân cực Bi-Polar Thời gian
Các tính năng của Biểu đồ do Chartist tạo:
Cấu hình cực nhạy. Vị trí nhãn Nhãn nhiều dòng Các thanh chồng lên nhau cho di động Lỗ trong dữ liệu CSS Animation SVG Animation Advanced SMIL Animations Hỗ trợ plugin
Cách sử dụng Chartsit để tạo biểu đồ SVG?
Có nhiều cách để sử dụng thư viện này. Tùy thuộc vào loại nhà phát triển giao diện người dùng, bạn có thể sử dụng nó. Nó đi kèm dưới dạng mô-đun Node cũng như tệp kịch bản có thể nhúng mà bạn có thể phân phát trực tiếp trên HTML thông qua CDN.
Để đơn giản, bạn có thể sử dụng nó trong các tài liệu HTML khá dễ dàng. Bạn chỉ cần nhập các tệp này vào phần
trên trang web của mình.https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js
Sau khi liên kết các thư viện, bạn chỉ phải viết một phần tử
Bây giờ, hãy thêm một thẻ script sẽ thực sự tạo ra biểu đồ trong vùng chứa được chỉ định. Điều này thực sự rất đơn giản. Nếu bạn biết rất rõ về JavaScript thì bạn có thể xem qua tài liệu để xem cách tạo tùy chỉnh đồ thị. Đối với mục đích demo, bạn chỉ có thể sử dụng đoạn mã sau. Thêm nó ngay bên dưới phần tử
Bây giờ, bạn sắp hoàn tất. Chỉ cần mở tệp HTML trong trình duyệt. Biểu đồ sẽ được tạo ngay bây giờ cho bạn. Bạn có thể sử dụng mã JS để tạo biểu đồ tùy chỉnh dựa trên các dữ liệu khác nhau. Ngoài ra, bạn có thể tạo một loại biểu đồ khác theo cách này.
Tài liệu trên trang web Chartist chính rất chi tiết. Nó có nhiều ví dụ về cách tạo biểu đồ động. Là một nhà phát triển front-end, bạn sẽ phải xem qua tài liệu đó để tạo biểu đồ. Và với một số mã, bạn thậm chí có thể xuất chúng.
Kết luận:
Tôi phải nói rằng Chartist là một công cụ tuyệt vời dành cho các nhà phát triển và nhà thiết kế để tích hợp các biểu đồ tùy chỉnh trong dàn dựng cũng như trang web trong sản xuất. Nó rất đơn giản và bạn không thực sự phải viết một đoạn mã quá dài trừ khi bạn không tạo ra một số thực sự phức tạp. Kho lưu trữ GitHub đã có hơn 10 nghìn sao, bản thân nó đã là một thành tựu to lớn.
