Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Python
Code

Giới thiệu về Pygal: Trình tạo biểu đồ SVG trong Python

by
Difficulty:BeginnerLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

SVG (Scalable Vector Graphics) là một định dạng hình ảnh đồ họa dựa trên véc tơ trong định dạng XML. Trong hướng dẫn này, bạn sẽ tìm hiểu về việc sử dụng Pygal, một thư viện vẽ đồ thị SVG trong Python.

Bắt đầu

Không cần cài đặt các phụ thuộc cho Pygal. Nó có sẵn cho Python 2.7+. Giả sử rằng bạn đã cài đặt Python và pip trên hệ thống của bạn, thì bạn cài đặt Pygal bằng cách sử dụng pip.

Nếu bạn muốn sử dụng phiên bản mới nhất của Pygal, hãy tìm hiểu kho chứa Pygal trên GitHub và sao chép nó.

Tạo một Biểu đồ hình thanh

Minh hoạ dữ liệu là giải thích các thông tin mà chúng ta có trong các hình thức biểu đồ hoặc đồ thị. Trong hướng dẫn này, bạn sẽ học cách để tạo ra một biểu đồ hình thanh bằng cách sử dụng thư viện Pygal bên trong một ứng dụng web Python Flask. Hãy bắt đầu bằng cách tạo ra một ứng dụng web Flask đơn giản. Đầu tiên, cài đặt Flask nếu bạn vẫn chưa cài đặt nó:

Tạo một tập tin có tên là app.py, và thêm code sau đây:

Giả sử rằng chúng ta có một số dữ liệu cho một danh sách điểm số hàng năm trong một số năm cụ thể. Các dữ liệu sẽ ở định dạng JSON. Dưới đây là một mẫu dữ liệu JSON:

Bạn sẽ thấy Year dọc theo trục X và Mark dọc theo trục Y. Vì vậy, hãy bắt đầu bằng cách tạo ra một rout mới cho ứng dụng Python của chúng ta:

Bạn sẽ tải dữ liệu từ một tập tin JSON, vì vậy bạn cần import thư viện json cùng với thư viện pygal.

Đọc dữ liệu JSON bằng cách mở tập tin trong chế độ đọc, và nạp dữ liệu JSON.

Tạo một đối tượng biểu đồ Bar từ thư viện pygal.

Một khi bạn đã có đối tượng biểu đồ chart, bạn cần thiết lập trục X và trục Y. Để thêm các điểm số trên trục Y, chúng ta sẽ đọc các mark như là một danh sách từ đối tượng dữ liệu JSON.

Tương tự như vậy, đọc year từ đối tượng dữ liệu JSON dưới dạng một danh sách.

Gán dữ liệu trục X và trục Y vào đối tượng biểu đồ chart.

Bây giờ, bạn cần kết xuất hình ảnh SVG của biểu đồ thanh vào một tập tin. Trong Python Flask, các tập tin tĩnh phục vụ trong một thư mục gọi là static, do đó tạo một thư mục gọi là static bên trong thư mục dự án. Bên trong thư mục static, tạo ra một thư mục images. Thêm dòng code sau để kết xuất hình ảnh SVG vào một tập tin.

Tạo một thư mục template trong thư mục dự án. Bên trong thư mục template, tạo một tập tin gọi là app.html. Thêm đoạn code HTML sau vào tập tin app.html:

Bạn sẽ render biểu đồ thanh bên trong tập tin app.html. Cuối cùng, tất cả những gì bạn cần làm là kết xuất template cùng với tham số image_url, nó sẽ phục vụ như là data cho phần tử. Dưới đây là route /bar đầy đủ cùng với phương thức:

Tôi đã thêm một chuỗi truy vấn cache vào img_url để ngăn chặn hình ảnh được nạp từ bộ nhớ cache của trình duyệt.

Lưu các thay đổi trên và thử chạy ứng dụng:

Truy cập đến http://localhost:5000/bar và bạn sẽ có thể để xem biểu đồ hình thanh, dựa trên dữ liệu JSON.

PyGal Single Bar Chart

Nhiều biểu đồ hình thanh

Bạn cũng có thể thêm nhiều thanh vào biểu đồ hình thanh hiện có. Giả sử bạn có dữ liệu JSON cùng với một vài tham số phụ cần được trình bày. Dưới đây là một ví dụ:

Để hiển thị một thanh dữ liệu của giải đấu, bạn cần có một danh sách các điểm số và thêm nó vào đối tượng biểu đồ hình thanh.

Lưu các thay đổi trên và khởi động lại máy chủ. Truy cập http://localhost:5000/bar và bạn sẽ có biểu đồ hình thanh được kết xuất.

PyGal Mutiple Bar Chart

Thêm một Phong cách tuỳ biến

Bạn cũng có thể thêm các phong cách tuỳ biến vào các biểu đồ hình thanh. Ví dụ: để thay đổi màu sắc của thanh, bạn cần phải import phong cách Pygal.

Xác định phong cách tùy biến như được chỉ ra để xác định màu sắc cho thanh và để xác định một màu nền cho biểu đồ.

Áp dụng phong cách tùy biến vào biểu đồ khi tạo đối tượng biểu đồ hình thanh.

Lưu các thay đổi trên và khởi động lại máy chủ. Truy cập đến http://localhost:5000/bar và bạn sẽ có thể để nhìn thấy biểu đồ thanh với phong cách tùy biến được kết xuất trên màn hình.

PyGal Mutiple Bar Chart with Custom Style

Tổng kết

Trong hướng dẫn này, bạn đã được tìm hiểu cách làm thế nào để làm quen với việc sử dụng Pygal, một thư viện vẽ đồ thị SVG cho Python. Bạn đã học được cách sử dụng Pygal để tạo ra một biểu đồ hình thanh trong một ứng dụng Python Flask. Bạn đã được học cách để thêm nhiều thanh vào biểu đồ hình thanh và tùy biến phong cách của biểu đồ hình thanh.

Những gì bạn thấy chỉ là một phần của tảng băng trôi, và bạn có thể làm được nhiều hơn bằng cách sử dụng Pygal. Tôi muốn khuyên bạn nên đọc các tài liệu chính thức của Pygal để có được thông tin chi tiết.

Ngoài ra, đừng ngần ngại tìm xem những gì chúng tôi đang bán và tài liệu học tập trên Envato Market, và đừng ngần ngại đặt bất kỳ câu hỏi nào và cung cấp phản hồi có giá trị của bạn bằng cách sử dụng nguồn dữ liệu dưới đây.

Mã nguồn từ hướng dẫn này có sẵn trên GitHub.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.