Từ Plotly đến Dash

Xây dựng Dashboard với Dash và Plotly

Alex Scriven

Data Scientist

Ứng dụng Dash đầu tiên

Một ứng dụng Dash hoàn chỉnh:

from dash import Dash, dcc
app = Dash()
app.layout = [dcc.Graph(id='example-graph', figure=bar_fig)]
if __name__ == '__main__':
    app.run(debug=True)

Dùng được chức năng Python
- ví dụ: nội suy chuỗi print("f{my_variable}")

Các import chính của Dash

from dash import Dash, dcc

Dash khởi tạo ứng dụng
dcc có các thành phần UI như biểu đồ và input
- Một thành phần trong app của ta
- Thêm thành phần ở các phần sau khóa học

Bố cục ứng dụng

app = Dash()

app.layout = [dcc.Graph(
  id='example-graph',
  figure=bar_fig)]

Tạo đối tượng ứng dụng với Dash()
Thiết lập app.layout
- Dùng dcc.Graph()
  - figure = Hình Plotly để hiển thị
  - id = Quan trọng cho callback sau này

Chạy ứng dụng

if __name__ == '__main__':
    app.run(debug=True)

Chạy script từ dòng lệnh
- ví dụ: python my_app.py trong dòng lệnh
debug giúp phản hồi khi thử nghiệm

Ứng dụng của chúng ta

Truy cập bằng trình duyệt như Google Chrome
Khi app chạy, cập nhật và lưu file .py để thấy thay đổi trực tiếp trên trình duyệt

Ảnh chụp màn hình terminal sau khi chạy một ứng dụng Dash. Chữ trắng trên nền đen hiển thị các chi tiết đã nêu trong script.

Ứng dụng trong trình duyệt

GIF biểu đồ thanh ngang: trục x là tổng doanh số, trục y là quốc gia. Cùng biểu đồ như bài trước nhưng trong trình duyệt Chrome, thanh địa chỉ hiển thị địa chỉ máy chủ. Chuột rê qua biểu đồ và nhấp vào thanh URL để minh họa máy chủ đang chạy.

Dash trên DataCamp

Khác với bài tập DataCamp khác:
- Dòng thiết lập ở đầu bài tập
- Chạy toàn bộ một lượt (không từng dòng)
- Mã (rất) dài hơn
Dashboard đầy đủ chức năng (mở rộng cửa sổ để xem!)

Ảnh chụp phần đầu của bài tập mã Dash đã chạy, nổi bật nút mở rộng đầu ra HTML để xem app toàn màn hình.

Hãy thực hành!

Xây dựng Dashboard với Dash và Plotly