Tại PyCon US 2022, CEO của Anaconda đã công bố một công nghệ mới có tên PyScript cho phép người dùng viết mã Python trên trình duyệt
Chúng ta chỉ cần viết và chạy mã Python trong HTML để xây dựng các ứng dụng web. Điều này có nghĩa là chúng ta không cần lo lắng về việc triển khai mà mọi thứ sẽ diễn ra trong trình duyệt web của chúng ta
Một trong những điều thú vị và dễ dàng nhất mà bạn có thể xây dựng trên trình duyệt web của mình là trực quan hóa Python và trong hướng dẫn này, tôi sẽ chỉ cho bạn cách hiển thị trực quan hóa matplotlib và hiệu ứng bokeh trên trình duyệt web của bạn bằng PyScript
Sau này, bạn thậm chí có thể tạo trang tổng quan và chia sẻ tệp HTML để những người khác có thể xem tệp đó trong trình duyệt web của họ
Không cảm thấy như đọc?
First Things First —Thêm PyScript vào mẫu HTMLĐể thiết lập PyScript, trước tiên chúng ta cần một mẫu HTML cơ bản
Hầu hết các trình soạn thảo văn bản và IDE đều có mẫu HTML mà bạn có thể làm việc với. Bạn chỉ cần tạo một tệp HTML, sau đó nhập
1 hoặc
2 và nhấn enterỞ Pycharm, tôi có thể lấy mẫu sau khi viết
1. Trong trường hợp bạn không hiểu, đây là mẫu bạn có thể sử dụngBây giờ để sử dụng PyScript, hãy thêm các dòng sau vào phần
4 trong mẫu HTML
Những dòng đó được trích xuất từ trang web PyScript. Tôi sẽ dán chúng bên dưới thẻ
5cậu nên có vài thứ như thế này
Tuyệt quá. Cho đến nay, chúng tôi đã thiết lập thành công PyScript. Bây giờ, hãy vẽ một số hình ảnh trực quan trên trình duyệt web của chúng tôi
1. Matplotlib vẽ trên trình duyệt web của bạn bằng PyScriptCác bước để vẽ sơ đồ trực quan bằng matplotlib và hiệu ứng bokeh trên trình duyệt web của chúng tôi hơi khác một chút
Hãy bắt đầu bằng cách tạo một biểu đồ đường bằng matplotlib và hiển thị nó trong trình duyệt web của chúng ta
Đang tải matplotlib
Để tạo biểu đồ đường của chúng tôi, trước tiên, chúng tôi phải tải matplotlib trong tệp HTML. Chúng tôi sử dụng thẻ
6 cho điều đó trong đoạn trích bên dướiNgoài ra, trong phần
7, tôi thêm tiêu đề cho cốt truyện của chúng tôi bằng cách sử dụng thẻ
0. Bên trong thẻ đó, tôi in dòng chữ “My Lineplot” bằng mã PythonĐể xem kết quả của việc này, chúng tôi phải mở tệp HTML này trong trình duyệt web của mình. Trên Pycharm, tôi có thể dễ dàng làm điều đó bằng cách đi tới góc trên bên phải và nhấp vào biểu tượng Chrome
Hình ảnh của tác giả
Bạn cũng có thể mở tệp HTML trên trình duyệt của mình bằng cách nhấp chuột phải vào tệp, chọn “Mở bằng” và chọn Chrome/Safari/Firefox
Sau khi bạn chọn trình duyệt, một tab mới sẽ mở ra. Bạn nên xem thứ này
Hình ảnh của tác giả
Tuyệt quá. Cho đến nay chúng tôi có tiêu đề trong trình duyệt. Bây giờ hãy vẽ biểu đồ đường thẳng
Hiển thị biểu đồ đường trên trình duyệt web
Trước khi chúng tôi viết mã Python để tạo biểu đồ đường, trong phần
7, chúng tôi phải tạo một
2 sẽ chứa
3 của biểu đồ này. Id sẽ là “lineplot”
Sau đó, chúng tôi tạo sơ đồ đường bằng cách sử dụng thẻ
0. Ở đây chúng tôi sử dụng thuộc tính
5 và đặt nó bằng id mà chúng tôi đã xác định trước đó
# Python Code Goes Here ...
Đây là mã Python để tạo biểu đồ đường kẻ [bạn nên đặt nó bên trong thẻ
6]Tuyệt quá. Nếu bạn đặt tất cả các yếu tố lại với nhau, bạn sẽ thấy biểu đồ đường bên dưới trong trình duyệt của mình [có thể mất vài giây để tải]
Hình ảnh của tác giả
Trong trường hợp bạn gặp khó khăn khi ghép các phần lại với nhau, bạn có thể tìm mã hoàn chỉnh trên Github của tôi
Không giống như Matplotlib, Bokeh yêu cầu thêm một vài dòng bổ sung trong phần
4Chúng ta hãy có một cái nhìn
Mã được trích xuất từ PyScrpt Github và bao gồm những thứ như phần tử Javascript [dòng 8–17], bên cạnh hai dòng chúng tôi đã sao chép trước đó từ trang web PyScript
Bây giờ, hãy thêm thẻ
2 và
0 bên trong phần
7 để hiển thị sơ đồ hiệu ứng bokeh của chúng ta trên webNếu bạn đặt 2 đoạn mã lại với nhau và làm mới trình duyệt của mình, bạn sẽ thấy cốt truyện bên dưới
Hình ảnh của tác giả
Đó là nó. Bây giờ bạn đã biết cách chạy trực quan hóa trên trình duyệt web bằng Python và HTML
Học Khoa học dữ liệu với Python?
Nếu bạn thích đọc những câu chuyện như thế này và muốn hỗ trợ tôi với tư cách là một nhà văn, hãy cân nhắc đăng ký để trở thành thành viên Medium. Đó là 5 đô la một tháng, cho phép bạn truy cập không giới hạn vào hàng nghìn hướng dẫn về Python và các bài báo về Khoa học dữ liệu. Nếu bạn đăng ký bằng liên kết của tôi, tôi sẽ kiếm được một khoản hoa hồng nhỏ mà bạn không phải trả thêm phí