Các ứng dụng Dash cung cấp giao diện point-&-click cho các mô hình được viết bằng Python, mở rộng đáng kể khái niệm về những gì có thể có trong một "bảng điều khiển" truyền thống. " Với các ứng dụng Dash, các nhà khoa học và kỹ sư dữ liệu đưa các phân tích Python phức tạp vào tay những người ra quyết định kinh doanh và nhà điều hành
Khi xây dựng các ứng dụng Dash trong môi trường kinh doanh, bạn sẽ cần Dash Enterprise để triển khai và mở rộng chúng, đồng thời tích hợp chúng với cơ sở hạ tầng CNTT như dịch vụ xác thực và VPC. Xem video ngắn này của Phó chủ tịch phụ trách sản phẩm của Plotly để biết cách Dash Enterprise mang lại kết quả kinh doanh nhanh hơn và có tác động hơn về trí tuệ nhân tạo và các sáng kiến khoa học dữ liệu
Trước đây, việc tạo các ứng dụng web phân tích là nhiệm vụ dành cho các nhà phát triển dày dạn kinh nghiệm đòi hỏi kiến thức về nhiều ngôn ngữ lập trình và khuôn khổ. Đó không còn là trường hợp nữa. Ngày nay, bạn có thể tạo giao diện trực quan hóa dữ liệu bằng Python thuần túy. Một công cụ phổ biến cho việc này là Dash
Dash cung cấp cho các nhà khoa học dữ liệu khả năng hiển thị kết quả của họ trong các ứng dụng web tương tác. Bạn không cần phải là một chuyên gia về phát triển web. Trong một buổi chiều, bạn có thể xây dựng và triển khai ứng dụng Dash để chia sẻ với người khác
Trong hướng dẫn này, bạn sẽ học cách
- Tạo một ứng dụng Dash
- Sử dụng các thành phần cốt lõi của Dash và các thành phần HTML
- Tùy chỉnh kiểu ứng dụng Dash của bạn
- Sử dụng các cuộc gọi lại để xây dựng các ứng dụng tương tác
- Triển khai ứng dụng của bạn trên Heroku
Bạn có thể tải xuống mã nguồn, dữ liệu và tài nguyên cho ứng dụng mẫu mà bạn sẽ tạo trong hướng dẫn này bằng cách nhấp vào liên kết bên dưới
Lấy mã nguồn. Nhấp vào đây để lấy mã nguồn mà bạn sẽ sử dụng để tìm hiểu về cách tạo giao diện trực quan hóa dữ liệu bằng Python với Dash trong hướng dẫn này
Dash là gì?
Dash là một khung nguồn mở để xây dựng giao diện trực quan hóa dữ liệu. Được phát hành vào năm 2017 dưới dạng thư viện Python, nó đã phát triển để bao gồm các triển khai cho R và Julia. Dash giúp các nhà khoa học dữ liệu xây dựng các ứng dụng web phân tích mà không yêu cầu kiến thức phát triển web nâng cao
Ba công nghệ cấu thành cốt lõi của Dash
- Flask cung cấp chức năng máy chủ web
- Phản ứng. js hiển thị giao diện người dùng của trang web
- âm mưu. js tạo các biểu đồ được sử dụng trong ứng dụng của bạn
Nhưng bạn không phải lo lắng về việc làm cho tất cả các công nghệ này hoạt động cùng nhau. Dash sẽ làm điều đó cho bạn. Bạn chỉ cần viết Python, R hoặc Julia và rắc thêm một chút CSS
Plotly, một công ty có trụ sở tại Canada, đã xây dựng Dash và hỗ trợ sự phát triển của nó. Bạn có thể biết công ty từ các thư viện đồ thị phổ biến có cùng tên. Plotly [công ty] mã nguồn mở Dash và phát hành nó theo giấy phép MIT, vì vậy bạn có thể sử dụng Dash miễn phí
Plotly cũng cung cấp một người bạn đồng hành thương mại với Dash có tên là Dash Enterprise. Dịch vụ trả phí này cung cấp cho các công ty các dịch vụ hỗ trợ như lưu trữ, triển khai và xử lý xác thực trên các ứng dụng Dash. Nhưng những tính năng này tồn tại bên ngoài hệ sinh thái mã nguồn mở của Dash
Dash sẽ giúp bạn xây dựng bảng điều khiển một cách nhanh chóng. Nếu bạn đã quen với việc phân tích dữ liệu hoặc xây dựng trực quan hóa dữ liệu bằng Python, thì Dash sẽ là một bổ sung hữu ích cho hộp công cụ của bạn. Dưới đây là một vài ví dụ về những gì bạn có thể làm với Dash
- Bảng điều khiển để phân tích các vị trí giao dịch trong thời gian thực
- Hình dung về hàng triệu chuyến đi Uber
- Báo cáo tài chính tương tác
Đây chỉ là một mẫu nhỏ. Nếu bạn muốn xem các trường hợp sử dụng thú vị khác, hãy xem Thư viện ứng dụng Dash
Ghi chú. Bạn không cần kiến thức nâng cao về phát triển web để làm theo hướng dẫn này, nhưng một số kiến thức quen thuộc với HTML và CSS sẽ không ảnh hưởng gì
Phần còn lại của hướng dẫn này giả định rằng bạn biết kiến thức cơ bản về các chủ đề sau
- Các thư viện vẽ đồ thị Python như Plotly, Bokeh hoặc Matplotlib
- HTML và cấu trúc của tệp HTML
- CSS và biểu định kiểu
Nếu bạn cảm thấy thoải mái với các yêu cầu và muốn tìm hiểu cách sử dụng Dash trong dự án tiếp theo của mình, hãy tiếp tục phần sau
Loại bỏ các quảng cáoBắt đầu với Dash trong Python
Trong hướng dẫn này, bạn sẽ thực hiện quy trình từ đầu đến cuối để xây dựng bảng điều khiển bằng Dash. Nếu bạn làm theo các ví dụ, thì bạn sẽ chuyển từ bảng điều khiển cơ bản trên máy cục bộ của mình sang bảng điều khiển theo kiểu được triển khai trên Heroku
Để tạo trang tổng quan, bạn sẽ sử dụng bộ dữ liệu về doanh số và giá bơ ở Hoa Kỳ từ năm 2015 đến 2018. Bộ dữ liệu này được Justin Kiggins biên soạn bằng cách sử dụng dữ liệu từ Hass Avocado Board
Cách thiết lập môi trường cục bộ của bạn
Để phát triển ứng dụng của mình, bạn sẽ cần một thư mục mới để lưu trữ mã và dữ liệu của mình cũng như môi trường ảo Python 3 sạch. Để tạo chúng, hãy làm theo hướng dẫn bên dưới, chọn phiên bản phù hợp với hệ điều hành của bạn
Nếu bạn đang sử dụng Windows, hãy mở dấu nhắc lệnh và thực hiện các lệnh này
c:\> mkdir avocado_analytics && cd avocado_analytics
c:\> c:\path\to\python\launcher\python -m venv venv
c:\> venv\Scripts\activate.bat
Lệnh đầu tiên tạo một thư mục cho dự án của bạn và di chuyển vị trí hiện tại của bạn đến đó. Lệnh thứ hai tạo một môi trường ảo ở vị trí đó. Lệnh cuối cùng kích hoạt môi trường ảo. Đảm bảo thay thế đường dẫn trong lệnh thứ hai bằng đường dẫn của trình khởi chạy Python 3 của bạn
Nếu bạn đang sử dụng macOS hoặc Linux, hãy làm theo các bước sau từ thiết bị đầu cuối
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
Hai lệnh đầu tiên thực hiện các hành động sau
- Tạo một thư mục có tên là
5avocado_analytics/ | ├── venv/ | └── avocado.csv
- Di chuyển vị trí hiện tại của bạn đến thư mục
5avocado_analytics/ | ├── venv/ | └── avocado.csv
- Tạo một môi trường ảo sạch có tên là
7 bên trong thư mục đóavocado_analytics/ | ├── venv/ | └── avocado.csv
Lệnh cuối cùng kích hoạt môi trường ảo bạn vừa tạo
Tiếp theo, bạn cần cài đặt các thư viện cần thiết. Bạn có thể làm điều đó bằng cách sử dụng
avocado_analytics/
|
├── venv/
|
└── avocado.csv
8 bên trong môi trường ảo của mình. Cài đặt các thư viện như sau[venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
Lệnh này sẽ cài đặt Dash và pandas trong môi trường ảo của bạn. Bạn sẽ sử dụng các phiên bản cụ thể của các gói này để đảm bảo rằng bạn có cùng một môi trường với môi trường được sử dụng trong hướng dẫn này. Ngoài Dash, gấu trúc sẽ giúp bạn xử lý việc đọc và sắp xếp dữ liệu bạn sẽ sử dụng trong ứng dụng của mình
Cuối cùng, bạn cần một số dữ liệu để đưa vào bảng điều khiển của mình. Bạn có thể tải xuống dữ liệu cũng như mã bạn thấy trong suốt hướng dẫn này bằng cách nhấp vào liên kết bên dưới
Lấy mã nguồn. Nhấp vào đây để lấy mã nguồn mà bạn sẽ sử dụng để tìm hiểu về cách tạo giao diện trực quan hóa dữ liệu bằng Python với Dash trong hướng dẫn này
Lưu dữ liệu dưới dạng
avocado_analytics/
|
├── venv/
|
└── avocado.csv
9 trong thư mục gốc của dự án. Đến bây giờ, bạn sẽ có một môi trường ảo với các thư viện cần thiết và dữ liệu trong thư mục gốc của dự án của bạn. Cấu trúc dự án của bạn sẽ trông như thế nàyavocado_analytics/
|
├── venv/
|
└── avocado.csv
bạn tốt để đi. Tiếp theo, bạn sẽ xây dựng ứng dụng Dash đầu tiên của mình
Loại bỏ các quảng cáoCách xây dựng một ứng dụng Dash
Đối với mục đích phát triển, thật hữu ích khi nghĩ về quy trình xây dựng ứng dụng Dash theo hai bước
- Xác định giao diện của ứng dụng của bạn bằng cách sử dụng bố cục của ứng dụng
- Sử dụng lệnh gọi lại để xác định phần nào trong ứng dụng của bạn tương tác và phần nào chúng phản ứng với
Trong phần này, bạn sẽ tìm hiểu về bố cục và trong phần sau, bạn sẽ tìm hiểu cách làm cho trang tổng quan của mình có tính tương tác. Bạn sẽ bắt đầu bằng cách thiết lập mọi thứ cần thiết để khởi tạo ứng dụng của mình và sau đó, bạn sẽ xác định bố cục của ứng dụng
Khởi tạo ứng dụng Dash của bạn
Tạo một tệp trống có tên
1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
0 trong thư mục gốc của dự án của bạn, sau đó xem lại mã của 1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
0 trong phần này. Để giúp bạn sao chép toàn bộ mã dễ dàng hơn, bạn sẽ tìm thấy toàn bộ nội dung của 1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
0 ở cuối phần nàyĐây là vài dòng đầu tiên của
1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
0 1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
Từ dòng 1 đến dòng 4, bạn nhập các thư viện cần thiết.
1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
4, 1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
5, 1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
6 và 1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
7. Mỗi thư viện cung cấp một khối xây dựng cho ứng dụng của bạn
4 giúp bạn khởi tạo ứng dụng của mình1import dash 2import dash_core_components as dcc 3import dash_html_components as html 4import pandas as pd 5 6data = pd.read_csv["avocado.csv"] 7data = data.query["type == 'conventional' and region == 'Albany'"] 8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"] 9data.sort_values["Date", inplace=True] 10 11app = dash.Dash[__name__]
5 cho phép bạn tạo các thành phần tương tác như biểu đồ, danh sách thả xuống hoặc phạm vi ngày1import dash 2import dash_core_components as dcc 3import dash_html_components as html 4import pandas as pd 5 6data = pd.read_csv["avocado.csv"] 7data = data.query["type == 'conventional' and region == 'Albany'"] 8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"] 9data.sort_values["Date", inplace=True] 10 11app = dash.Dash[__name__]
6 cho phép bạn truy cập các thẻ HTML1import dash 2import dash_core_components as dcc 3import dash_html_components as html 4import pandas as pd 5 6data = pd.read_csv["avocado.csv"] 7data = data.query["type == 'conventional' and region == 'Albany'"] 8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"] 9data.sort_values["Date", inplace=True] 10 11app = dash.Dash[__name__]
7 giúp bạn đọc và sắp xếp dữ liệu1import dash 2import dash_core_components as dcc 3import dash_html_components as html 4import pandas as pd 5 6data = pd.read_csv["avocado.csv"] 7data = data.query["type == 'conventional' and region == 'Albany'"] 8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"] 9data.sort_values["Date", inplace=True] 10 11app = dash.Dash[__name__]
Trên các dòng 6 đến 9, bạn đọc dữ liệu và xử lý trước dữ liệu đó để sử dụng trong trang tổng quan. Bạn lọc một số dữ liệu vì phiên bản hiện tại của bảng điều khiển của bạn không tương tác và các giá trị được biểu thị sẽ không có ý nghĩa gì khác
Ở dòng 11, bạn tạo một thể hiện của lớp
avocado_analytics/
|
├── venv/
|
└── avocado.csv
22. Nếu bạn đã từng sử dụng Flask trước đây, thì việc khởi tạo lớp avocado_analytics/
|
├── venv/
|
└── avocado.csv
22 có thể trông quen thuộc. Trong Flask, bạn thường khởi tạo ứng dụng WSGI bằng cách sử dụng avocado_analytics/
|
├── venv/
|
└── avocado.csv
24. Tương tự, đối với ứng dụng Dash, bạn sử dụng avocado_analytics/
|
├── venv/
|
└── avocado.csv
25Xác định bố cục của ứng dụng Dash của bạn
Tiếp theo, bạn sẽ xác định thuộc tính
avocado_analytics/
|
├── venv/
|
└── avocado.csv
26 của ứng dụng của mình. Thuộc tính này quyết định giao diện của ứng dụng của bạn. Trong trường hợp này, bạn sẽ sử dụng tiêu đề có mô tả bên dưới và hai biểu đồ. Đây là cách bạn xác định nóavocado_analytics/
|
├── venv/
|
└── avocado.csv
2Mã này định nghĩa thuộc tính
avocado_analytics/
|
├── venv/
|
└── avocado.csv
26 của đối tượng avocado_analytics/
|
├── venv/
|
└── avocado.csv
28. Thuộc tính này xác định giao diện ứng dụng của bạn bằng cách sử dụng cấu trúc cây được tạo từ các thành phần DashCác thành phần của Dash được đóng gói sẵn trong thư viện Python. Một số trong số chúng đi kèm với Dash khi bạn cài đặt nó. Phần còn lại bạn phải cài đặt riêng. Bạn sẽ thấy hai bộ thành phần trong hầu hết mọi ứng dụng
- Các thành phần HTML của Dash cung cấp cho bạn các trình bao bọc Python cho các phần tử HTML. Ví dụ: bạn có thể sử dụng thư viện này để tạo các thành phần như đoạn văn, tiêu đề hoặc danh sách
- Các thành phần cốt lõi của Dash cung cấp cho bạn các bản tóm tắt Python để tạo giao diện người dùng tương tác. Bạn có thể sử dụng nó để tạo các yếu tố tương tác như biểu đồ, thanh trượt hoặc danh sách thả xuống
Trên các dòng 13 đến 20, bạn có thể thấy các thành phần Dash HTML trong thực tế. Bạn bắt đầu bằng cách xác định thành phần cha, một
avocado_analytics/
|
├── venv/
|
└── avocado.csv
29. Sau đó, bạn thêm hai yếu tố nữa, tiêu đề [______310] và đoạn văn [avocado_analytics/
|
├── venv/
|
└── avocado.csv
11], làm phần tử con của nóCác thành phần này tương đương với các thẻ HTML
avocado_analytics/
|
├── venv/
|
└── avocado.csv
12, avocado_analytics/
|
├── venv/
|
└── avocado.csv
13 và avocado_analytics/
|
├── venv/
|
└── avocado.csv
14. Bạn có thể sử dụng các đối số của các thành phần để sửa đổi các thuộc tính hoặc nội dung của các thẻ. Ví dụ: để chỉ định nội dung bên trong thẻ avocado_analytics/
|
├── venv/
|
└── avocado.csv
12, bạn sử dụng đối số avocado_analytics/
|
├── venv/
|
└── avocado.csv
16 trong avocado_analytics/
|
├── venv/
|
└── avocado.csv
29Ngoài ra còn có các đối số khác trong các thành phần, chẳng hạn như
avocado_analytics/
|
├── venv/
|
└── avocado.csv
18, avocado_analytics/
|
├── venv/
|
└── avocado.csv
19 hoặc avocado_analytics/
|
├── venv/
|
└── avocado.csv
10, đề cập đến các thuộc tính của thẻ HTML. Bạn sẽ thấy cách sử dụng một số thuộc tính này để tạo kiểu cho trang tổng quan của mình trong phần tiếp theoPhần bố cục hiển thị từ dòng 13 đến dòng 20 sẽ được chuyển thành mã HTML sau
avocado_analytics/
|
├── venv/
|
└── avocado.csv
1Mã HTML này được hiển thị khi bạn mở ứng dụng của mình trong trình duyệt. Nó tuân theo cấu trúc giống như mã Python của bạn, với thẻ
avocado_analytics/
|
├── venv/
|
└── avocado.csv
12 chứa phần tử avocado_analytics/
|
├── venv/
|
└── avocado.csv
13 và phần tử avocado_analytics/
|
├── venv/
|
└── avocado.csv
14Trên các dòng từ 21 đến 24 trong đoạn mã bố cục, bạn có thể thấy thành phần biểu đồ từ Các thành phần cốt lõi của Dash trong thực tế. Có hai thành phần
avocado_analytics/
|
├── venv/
|
└── avocado.csv
14 trong avocado_analytics/
|
├── venv/
|
└── avocado.csv
15. Biểu đồ đầu tiên biểu thị giá trung bình của bơ trong thời gian nghiên cứu và biểu đồ thứ hai là số lượng bơ được bán ở Hoa Kỳ trong cùng thời kỳVề cơ bản, Dash sử dụng Plotly. js để tạo biểu đồ. Các thành phần
avocado_analytics/
|
├── venv/
|
└── avocado.csv
14 mong đợi một đối tượng hình hoặc từ điển Python chứa dữ liệu và bố cục của cốt truyện. Trong trường hợp này, bạn cung cấp cái sauCuối cùng, hai dòng mã này giúp bạn chạy ứng dụng của mình
avocado_analytics/
|
├── venv/
|
└── avocado.csv
1Dòng 48 và 49 cho phép chạy cục bộ ứng dụng Dash của bạn bằng máy chủ tích hợp sẵn của Flask. Tham số
avocado_analytics/
|
├── venv/
|
└── avocado.csv
17 từ avocado_analytics/
|
├── venv/
|
└── avocado.csv
18 cho phép tùy chọn tải lại nóng trong ứng dụng của bạn. Điều này có nghĩa là khi bạn thực hiện thay đổi đối với ứng dụng của mình, ứng dụng sẽ tự động tải lại mà bạn không cần phải khởi động lại máy chủCuối cùng, đây là phiên bản đầy đủ của
1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
0. Bạn có thể sao chép mã này vào 1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
0 trống mà bạn đã tạo trước đóứng dụng. pyHiện/Ẩn
avocado_analytics/
|
├── venv/
|
└── avocado.csv
4Đây là mã cho bảng điều khiển cơ bản. Nó bao gồm tất cả các đoạn mã bạn đã xem trước đó trong phần này
Bây giờ là lúc để chạy ứng dụng của bạn. Mở một thiết bị đầu cuối bên trong thư mục gốc của dự án của bạn và trong môi trường ảo của dự án. Chạy
avocado_analytics/
|
├── venv/
|
└── avocado.csv
41, sau đó truy cập avocado_analytics/
|
├── venv/
|
└── avocado.csv
42 bằng trình duyệt ưa thích của bạnNó còn sống. Trang tổng quan của bạn sẽ trông như thế này
Tin vui là bạn hiện có phiên bản bảng điều khiển đang hoạt động. Tin xấu là vẫn còn một số việc phải làm trước khi bạn có thể hiển thị điều này cho người khác. Trang tổng quan không đẹp mắt và bạn vẫn cần thêm một số tương tác vào nó
Nhưng đừng lo—bạn sẽ tìm hiểu cách khắc phục những vấn đề này trong các phần tiếp theo
Loại bỏ các quảng cáoTạo kiểu cho ứng dụng Dash của bạn
Dash cung cấp cho bạn rất nhiều tính linh hoạt để tùy chỉnh giao diện ứng dụng của bạn. Bạn có thể sử dụng các tệp CSS hoặc JavaScript của riêng mình, đặt favicon [biểu tượng nhỏ hiển thị trên trình duyệt web] và nhúng hình ảnh, trong số các tùy chọn nâng cao khác
Trong phần này, bạn sẽ tìm hiểu cách áp dụng các kiểu tùy chỉnh cho các thành phần, sau đó, bạn sẽ tạo kiểu cho trang tổng quan mà bạn đã tạo trong phần trước
Cách áp dụng kiểu tùy chỉnh cho các thành phần của bạn
Bạn có thể tạo kiểu cho các thành phần theo hai cách
- Sử dụng đối số
18 của các thành phần riêng lẻavocado_analytics/ | ├── venv/ | └── avocado.csv
- Cung cấp tệp CSS bên ngoài
Sử dụng đối số
avocado_analytics/
|
├── venv/
|
└── avocado.csv
18 để tùy chỉnh trang tổng quan của bạn rất đơn giản. Đối số này nhận một từ điển Python với các cặp khóa-giá trị bao gồm tên của các thuộc tính CSS và các giá trị bạn muốn đặtGhi chú. Khi chỉ định các thuộc tính CSS trong đối số
avocado_analytics/
|
├── venv/
|
└── avocado.csv
18, bạn nên sử dụng cú pháp mixCase thay vì các từ được phân tách bằng dấu gạch ngang. Ví dụ: để thay đổi màu nền của một phần tử, bạn nên sử dụng avocado_analytics/
|
├── venv/
|
└── avocado.csv
46 chứ không phải avocado_analytics/
|
├── venv/
|
└── avocado.csv
47Nếu bạn muốn thay đổi kích thước và màu sắc của phần tử
avocado_analytics/
|
├── venv/
|
└── avocado.csv
48 trong 1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
0, thì bạn có thể đặt đối số avocado_analytics/
|
├── venv/
|
└── avocado.csv
18 của phần tử như sau[venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
5Tại đây, bạn cung cấp cho
avocado_analytics/
|
├── venv/
|
└── avocado.csv
18 một từ điển với các thuộc tính và giá trị mà bạn muốn đặt cho chúng. Trong trường hợp này, kiểu được chỉ định là có tiêu đề màu đỏ với cỡ chữ 48 pixelNhược điểm của việc sử dụng đối số
avocado_analytics/
|
├── venv/
|
└── avocado.csv
18 là nó không mở rộng tốt khi cơ sở mã của bạn phát triển. Nếu trang tổng quan của bạn có nhiều thành phần mà bạn muốn trông giống nhau, thì bạn sẽ phải lặp lại rất nhiều mã của mình. Thay vào đó, bạn có thể sử dụng tệp CSS tùy chỉnhNếu bạn muốn bao gồm các tệp CSS hoặc JavaScript cục bộ của riêng mình, thì bạn cần tạo một thư mục có tên là
[venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
53 trong thư mục gốc của dự án và lưu các tệp bạn muốn thêm vào đó. Theo mặc định, Dash sẽ tự động phục vụ bất kỳ tệp nào có trong [venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
53. Điều này cũng sẽ hoạt động để thêm biểu tượng yêu thích hoặc nhúng hình ảnh, như bạn sẽ thấy sau đâySau đó, bạn có thể sử dụng các đối số
avocado_analytics/
|
├── venv/
|
└── avocado.csv
19 hoặc avocado_analytics/
|
├── venv/
|
└── avocado.csv
10 của các thành phần để điều chỉnh kiểu của chúng bằng CSS. Các đối số này tương ứng với các thuộc tính [venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
57 và avocado_analytics/
|
├── venv/
|
└── avocado.csv
10 khi chúng được chuyển đổi thành các thẻ HTMLNếu bạn muốn điều chỉnh kích thước phông chữ và màu chữ của thành phần
avocado_analytics/
|
├── venv/
|
└── avocado.csv
48 trong 1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
0, thì bạn có thể sử dụng đối số avocado_analytics/
|
├── venv/
|
└── avocado.csv
19 như sau$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
0Đặt đối số
avocado_analytics/
|
├── venv/
|
└── avocado.csv
19 sẽ xác định thuộc tính lớp cho phần tử avocado_analytics/
|
├── venv/
|
└── avocado.csv
48. Sau đó, bạn có thể sử dụng tệp CSS trong thư mục $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
04 để chỉ định cách bạn muốn nó trông như thế nào$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
1Bạn sử dụng bộ chọn lớp để định dạng tiêu đề trong tệp CSS của mình. Bộ chọn này sẽ điều chỉnh định dạng tiêu đề. Bạn cũng có thể sử dụng nó với phần tử khác cần chia sẻ định dạng bằng cách đặt
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
05Tiếp theo, bạn sẽ tạo kiểu cho trang tổng quan của mình
Loại bỏ các quảng cáoCách cải thiện giao diện Bảng điều khiển của bạn
Bạn vừa trình bày những kiến thức cơ bản về kiểu dáng trong Dash. Bây giờ, bạn sẽ tìm hiểu cách tùy chỉnh giao diện bảng điều khiển của mình. Bạn sẽ thực hiện những cải tiến này
- Thêm một favicon và tiêu đề vào trang
- Thay đổi họ phông chữ của trang tổng quan của bạn
- Sử dụng tệp CSS bên ngoài để tạo kiểu cho các thành phần Dash
Bạn sẽ bắt đầu bằng cách học cách sử dụng các tài sản bên ngoài trong ứng dụng của mình. Điều đó sẽ cho phép bạn thêm biểu tượng yêu thích, họ phông chữ tùy chỉnh và biểu định kiểu CSS. Sau đó, bạn sẽ tìm hiểu cách sử dụng đối số
avocado_analytics/
|
├── venv/
|
└── avocado.csv
19 để áp dụng các kiểu tùy chỉnh cho các thành phần Dash của mìnhThêm tài sản bên ngoài vào ứng dụng của bạn
Tạo một thư mục có tên là
[venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
53 trong thư mục gốc của dự án của bạn. Tải xuống một favicon từ dự án mã nguồn mở Twemoji và lưu nó dưới dạng $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
08 trong [venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
53. Cuối cùng, tạo một tệp CSS trong [venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
53 có tên là $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
11 và mã trong phần có thể thu gọn bên dướikiểu. cssHiện/Ẩn
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
2Tệp
[venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
53 chứa các kiểu bạn sẽ áp dụng cho các thành phần trong bố cục ứng dụng của mình. Bây giờ, cấu trúc dự án của bạn sẽ trông như thế này$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
3Khi bạn khởi động máy chủ, Dash sẽ tự động phục vụ các tệp nằm trong
[venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
53. Bạn bao gồm hai tệp trong [venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
53. $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
08 và $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
11. Để đặt favicon mặc định, bạn không phải thực hiện thêm bất kỳ bước nào. Để sử dụng các kiểu bạn đã xác định trong $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
11, bạn sẽ cần sử dụng đối số avocado_analytics/
|
├── venv/
|
└── avocado.csv
19 trong các thành phần Dash 1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
0 yêu cầu một số thay đổi. Bạn sẽ bao gồm một biểu định kiểu bên ngoài, thêm tiêu đề vào bảng điều khiển của mình và tạo kiểu cho các thành phần bằng tệp $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
11. Xem lại các thay đổi bên dưới. Sau đó, trong phần cuối cùng của phần này, bạn sẽ tìm thấy mã đầy đủ cho phiên bản cập nhật của 1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
0Đây là cách bạn bao gồm biểu định kiểu bên ngoài và thêm tiêu đề vào bảng điều khiển của mình
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
4Trên các dòng 11 đến 18, bạn chỉ định một tệp CSS bên ngoài, một họ phông chữ mà bạn muốn tải vào ứng dụng của mình. Các tệp bên ngoài được thêm vào thẻ
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
22 của ứng dụng của bạn và được tải trước khi tải $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
23 của ứng dụng của bạn. Bạn sử dụng đối số $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
24 để thêm các tệp CSS bên ngoài hoặc $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
25 cho các tệp JavaScript bên ngoài như Google AnalyticsTrên dòng 19, bạn đặt tiêu đề cho ứng dụng của mình. Đây là văn bản xuất hiện trên thanh tiêu đề của trình duyệt web của bạn, trong kết quả tìm kiếm của Google và trong thẻ truyền thông xã hội khi bạn chia sẻ trang web của mình
Tùy chỉnh kiểu dáng của các thành phần
Để sử dụng các kiểu trong
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
11, bạn sẽ cần sử dụng đối số avocado_analytics/
|
├── venv/
|
└── avocado.csv
19 trong các thành phần Dash. Mã bên dưới thêm một avocado_analytics/
|
├── venv/
|
└── avocado.csv
19 với bộ chọn lớp tương ứng cho từng thành phần tạo tiêu đề cho trang tổng quan của bạn$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
5Trên các dòng từ 21 đến 37, bạn có thể thấy rằng đã có hai thay đổi đối với phiên bản ban đầu của trang tổng quan
- Có một phần tử đoạn văn mới với biểu tượng cảm xúc quả bơ sẽ đóng vai trò là biểu trưng
- Có một đối số
19 trong mỗi thành phần. Các tên lớp này phải khớp với bộ chọn lớp trongavocado_analytics/ | ├── venv/ | └── avocado.csv
11, bộ chọn này sẽ xác định giao diện của từng thành phần$ mkdir avocado_analytics && cd avocado_analytics $ python3 -m venv venv $ source venv/bin/activate
Ví dụ: lớp
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
31 được gán cho thành phần đoạn văn bắt đầu bằng $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
32 có bộ chọn tương ứng trong $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
11$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
6Dòng 29 đến 34 của
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
11 xác định định dạng cho bộ chọn lớp $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
31. Chúng sẽ thay đổi màu sắc, lề, căn chỉnh và chiều rộng tối đa của bất kỳ thành phần nào có $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
36. Tất cả các thành phần đều có bộ chọn lớp tương ứng trong tệp CSSSự thay đổi đáng kể khác là trong các biểu đồ. Đây là mã mới cho biểu đồ giá
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
7Trong mã này, bạn xác định một
avocado_analytics/
|
├── venv/
|
└── avocado.csv
19 và một vài tùy chỉnh cho các thông số $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
38 và $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
39 trong biểu đồ của bạn. Dưới đây là những thay đổi- dòng 43. Bạn xóa thanh nổi mà Plotly hiển thị theo mặc định
- Dòng 50 và 51. Bạn đặt mẫu di chuột để khi người dùng di chuột qua một điểm dữ liệu, nó sẽ hiển thị giá bằng đô la. Thay vì
40, nó sẽ hiển thị là$ mkdir avocado_analytics && cd avocado_analytics $ python3 -m venv venv $ source venv/bin/activate
41$ mkdir avocado_analytics && cd avocado_analytics $ python3 -m venv venv $ source venv/bin/activate
- Dòng 54 đến 66. Bạn chỉnh trục, màu của hình, định dạng tiêu đề trong phần bố cục của đồ thị
- Dòng 69. Bạn bọc biểu đồ trong một lớp
29 với lớpavocado_analytics/ | ├── venv/ | └── avocado.csv
43. Điều này sẽ cung cấp cho biểu đồ một nền trắng và thêm một bóng nhỏ bên dưới nó$ mkdir avocado_analytics && cd avocado_analytics $ python3 -m venv venv $ source venv/bin/activate
Có những điều chỉnh tương tự đối với biểu đồ doanh số và khối lượng. Bạn có thể xem những mã đó trong mã đầy đủ cho
1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
0 được cập nhật trong phần có thể thu gọn bên dướiứng dụng. pyHiện/Ẩn
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
8Đây là phiên bản cập nhật của
1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
0. Nó có các thay đổi bắt buộc trong mã để thêm biểu tượng yêu thích và tiêu đề trang, cập nhật họ phông chữ và sử dụng tệp CSS bên ngoài. Sau những thay đổi này, trang tổng quan của bạn sẽ trông như thế nàyTrong phần tiếp theo, bạn sẽ tìm hiểu cách thêm các thành phần tương tác vào trang tổng quan của mình
Loại bỏ các quảng cáoThêm tính tương tác vào ứng dụng Dash của bạn bằng lệnh gọi lại
Trong phần này, bạn sẽ tìm hiểu cách thêm các yếu tố tương tác vào trang tổng quan của mình
Tính tương tác của Dash dựa trên mô hình lập trình phản ứng. Điều này có nghĩa là bạn có thể liên kết các thành phần với các thành phần của ứng dụng mà bạn muốn cập nhật. Nếu người dùng tương tác với một thành phần đầu vào như danh sách thả xuống hoặc thanh trượt phạm vi, thì đầu ra, chẳng hạn như biểu đồ, sẽ tự động phản ứng với những thay đổi trong đầu vào
Bây giờ, hãy làm cho bảng điều khiển của bạn tương tác. Phiên bản mới này của bảng điều khiển của bạn sẽ cho phép người dùng tương tác với các bộ lọc sau
- Vùng đất
- Loại bơ
- phạm vi ngày
Bắt đầu bằng cách thay thế
1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
0 cục bộ của bạn bằng phiên bản mới trong phần có thể thu gọn bên dướiứng dụng. pyHiện/Ẩn
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
9Tiếp theo, thay thế
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
11 bằng mã trong phần có thể thu gọn bên dướikiểu. cssHiện/Ẩn
[venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
0Bây giờ bạn đã sẵn sàng bắt đầu thêm các thành phần tương tác vào ứng dụng của mình
Cách tạo các thành phần tương tác
Đầu tiên, bạn sẽ tìm hiểu cách tạo các thành phần mà người dùng có thể tương tác với. Để làm được điều đó, bạn sẽ bao gồm một
avocado_analytics/
|
├── venv/
|
└── avocado.csv
29 mới phía trên biểu đồ của mình. Nó sẽ bao gồm hai danh sách thả xuống và bộ chọn phạm vi ngày mà người dùng có thể sử dụng để lọc dữ liệu và cập nhật biểu đồĐây là giao diện của nó trong
1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
0[venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
1Trên các dòng từ 24 đến 74, bạn xác định một
avocado_analytics/
|
├── venv/
|
└── avocado.csv
29 trên đầu biểu đồ bao gồm hai trình đơn thả xuống và bộ chọn phạm vi ngày. Nó sẽ phục vụ như một menu mà người dùng sẽ sử dụng để tương tác với dữ liệuThành phần đầu tiên trong menu là menu thả xuống Vùng. Đây là mã cho thành phần đó
[venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
2Trên các dòng 41 đến 55, bạn xác định trình đơn thả xuống mà người dùng sẽ sử dụng để lọc dữ liệu theo vùng. Ngoài tiêu đề, nó có thành phần
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
51. Đây là ý nghĩa của từng tham số
10 là định danh của phần tử nàyavocado_analytics/ | ├── venv/ | └── avocado.csv
53 là các tùy chọn được hiển thị khi danh sách thả xuống được chọn. Nó mong đợi một từ điển có nhãn và giá trị$ mkdir avocado_analytics && cd avocado_analytics $ python3 -m venv venv $ source venv/bin/activate
54 là giá trị mặc định khi tải trang$ mkdir avocado_analytics && cd avocado_analytics $ python3 -m venv venv $ source venv/bin/activate
55 cho phép người dùng để trống trường này nếu được đặt thành$ mkdir avocado_analytics && cd avocado_analytics $ python3 -m venv venv $ source venv/bin/activate
56$ mkdir avocado_analytics && cd avocado_analytics $ python3 -m venv venv $ source venv/bin/activate
19 là một bộ chọn lớp được sử dụng để áp dụng các kiểuavocado_analytics/ | ├── venv/ | └── avocado.csv
Bộ chọn Loại và Phạm vi Ngày tuân theo cấu trúc giống như danh sách thả xuống Vùng. Hãy tự mình xem xét chúng
Tiếp theo, hãy xem các thành phần của
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
58[venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
3Trên các dòng 90 đến 106, bạn định nghĩa các thành phần
avocado_analytics/
|
├── venv/
|
└── avocado.csv
14. Bạn có thể nhận thấy rằng, so với phiên bản trước của trang tổng quan, các thành phần thiếu đối số $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
39. Đó là bởi vì đối số $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
39 bây giờ sẽ được tạo bởi hàm gọi lại bằng cách sử dụng đầu vào mà người dùng đặt bằng bộ chọn Vùng, Loại và Phạm vi ngàyLoại bỏ các quảng cáoCách xác định cuộc gọi lại
Bạn đã xác định cách người dùng sẽ tương tác với ứng dụng của bạn. Bây giờ bạn cần làm cho ứng dụng của mình phản ứng với các tương tác của người dùng. Đối với điều đó, bạn sẽ sử dụng chức năng gọi lại
Các hàm gọi lại của Dash là các hàm Python thông thường với trình trang trí
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
62. Trong Dash, khi đầu vào thay đổi, chức năng gọi lại được kích hoạt. Hàm này thực hiện một số thao tác được xác định trước, chẳng hạn như lọc tập dữ liệu và trả về kết quả đầu ra cho ứng dụng. Về bản chất, các cuộc gọi lại liên kết đầu vào và đầu ra trong ứng dụng của bạnĐây là chức năng gọi lại được sử dụng để cập nhật biểu đồ
[venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
4Trên các dòng 111 đến 119, bạn xác định đầu vào và đầu ra bên trong trình trang trí
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
62Trước tiên, bạn xác định kết quả đầu ra bằng cách sử dụng đối tượng
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
64. Các đối tượng này có hai đối số- Mã định danh của phần tử mà họ sẽ sửa đổi khi hàm thực thi
- Thuộc tính của phần tử được sửa đổi
Ví dụ:
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
65 sẽ cập nhật thuộc tính $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
39 của phần tử $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
67Sau đó, bạn xác định đầu vào bằng cách sử dụng đối tượng
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
68. Họ cũng có hai đối số- Mã định danh của phần tử họ sẽ theo dõi các thay đổi
- Thuộc tính của phần tử đã xem mà họ nên sử dụng khi có thay đổi
Vì vậy,
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
69 sẽ theo dõi phần tử $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
70 để biết các thay đổi và sẽ lấy thuộc tính $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
54 của nó nếu phần tử thay đổiGhi chú. Đối tượng
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
68 được thảo luận ở đây được nhập từ $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
73. Hãy cẩn thận để không nhầm lẫn nó với thành phần đến từ 1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
5. Các đối tượng này không thể hoán đổi cho nhau và có các mục đích khác nhauỞ dòng 120, bạn xác định chức năng sẽ được áp dụng khi đầu vào thay đổi. Một điều cần lưu ý ở đây là các đối số của hàm sẽ tương ứng với thứ tự của các đối tượng
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
68 được cung cấp cho hàm gọi lại. Không có mối quan hệ rõ ràng giữa tên của các đối số trong hàm và các giá trị được chỉ định trong các đối tượng Đầu vàoCuối cùng, trên các dòng 121 đến 164, bạn xác định phần thân của hàm. Trong trường hợp này, hàm lấy đầu vào [khu vực, loại bơ và phạm vi ngày], lọc dữ liệu và tạo các đối tượng hình cho biểu đồ giá và khối lượng
Đó là tất cả. Nếu bạn đã làm theo đến điểm này, thì bảng điều khiển của bạn sẽ trông như thế này
con đường để đi. Đó là phiên bản cuối cùng của trang tổng quan của bạn. Ngoài việc làm cho nó trông đẹp mắt, bạn còn làm cho nó có tính tương tác. Bước còn thiếu duy nhất là đặt nó ở chế độ công khai để bạn có thể chia sẻ với người khác
Triển khai ứng dụng Dash của bạn lên Heroku
Bạn đã hoàn tất việc xây dựng ứng dụng của mình và bạn có một bảng điều khiển tương tác đầy đủ, đẹp mắt. Bây giờ bạn sẽ học cách triển khai nó
Ứng dụng Dash là ứng dụng Flask, vì vậy cả hai đều có chung tùy chọn triển khai. Trong phần này, bạn sẽ triển khai ứng dụng của mình trên Heroku
Trước khi bắt đầu, hãy đảm bảo bạn đã cài đặt giao diện dòng lệnh Heroku [CLI] và Git. Bạn có thể xác minh rằng cả hai đều tồn tại trong hệ thống của mình bằng cách chạy các lệnh này tại dấu nhắc lệnh [Windows] hoặc tại thiết bị đầu cuối [macOS, Linux]
[venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
5Đầu ra có thể thay đổi một chút tùy thuộc vào hệ điều hành của bạn và phiên bản bạn đã cài đặt, nhưng bạn sẽ không gặp lỗi
Chúng ta hãy đi đến đó
Đầu tiên, có một thay đổi nhỏ bạn cần thực hiện trong
1import dash
2import dash_core_components as dcc
3import dash_html_components as html
4import pandas as pd
5
6data = pd.read_csv["avocado.csv"]
7data = data.query["type == 'conventional' and region == 'Albany'"]
8data["Date"] = pd.to_datetime[data["Date"], format="%Y-%m-%d"]
9data.sort_values["Date", inplace=True]
10
11app = dash.Dash[__name__]
0. Sau khi bạn khởi tạo ứng dụng ở dòng 18, hãy thêm một biến mới có tên là $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
77[venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
6Phần bổ sung này là cần thiết để chạy ứng dụng của bạn bằng máy chủ WSGI. Không nên sử dụng máy chủ tích hợp của Flask trong quá trình sản xuất vì nó sẽ không thể xử lý nhiều lưu lượng truy cập
Tiếp theo, trong thư mục gốc của dự án, hãy tạo một tệp có tên
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
78, nơi bạn sẽ chỉ định phiên bản Python cho ứng dụng Heroku của mình[venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
7Khi bạn triển khai ứng dụng của mình, Heroku sẽ tự động phát hiện ra rằng đó là một ứng dụng Python và sẽ sử dụng đúng
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
79. Nếu bạn cũng cung cấp một $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
78 thì nó sẽ xác định phiên bản Python mà ứng dụng của bạn sẽ sử dụngTiếp theo, tạo tệp
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
81 trong thư mục gốc của dự án nơi bạn sẽ sao chép các thư viện cần thiết để thiết lập ứng dụng Dash của mình trên máy chủ web[venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
8Bạn có thể nhận thấy rằng có một gói trong
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
81 mà bạn chưa thấy cho đến bây giờ. $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
83. Gunicorn là một máy chủ HTTP WSGI thường được sử dụng để triển khai các ứng dụng Flask vào sản xuất. Bạn sẽ sử dụng nó để triển khai trang tổng quan của mìnhBây giờ hãy tạo một tệp có tên
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
84 với nội dung sau[venv] $ python -m pip install dash==1.13.3 pandas==1.0.5
9Tệp này cho ứng dụng Heroku biết những lệnh nào sẽ được thực thi để khởi động ứng dụng của bạn. Trong trường hợp này, nó khởi động máy chủ
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
83 cho trang tổng quan của bạnTiếp theo, bạn sẽ cần khởi tạo kho lưu trữ Git. Để làm điều đó, hãy chuyển đến thư mục gốc của dự án của bạn và thực hiện lệnh sau
avocado_analytics/
|
├── venv/
|
└── avocado.csv
0Điều này sẽ bắt đầu một kho lưu trữ
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
86 trong $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
87. Nó sẽ bắt đầu theo dõi tất cả những thay đổi bạn thực hiện đối với các tệp trong thư mục đóTuy nhiên, có những tệp bạn không muốn theo dõi bằng Git. Ví dụ: bạn thường muốn xóa các tệp được biên dịch Python, nội dung của thư mục môi trường ảo của bạn hoặc các tệp siêu dữ liệu, chẳng hạn như
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
88Để tránh theo dõi các tệp không cần thiết, hãy tạo một tệp có tên
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
89 trong thư mục gốc. Sau đó sao chép nội dung sau trong đóavocado_analytics/
|
├── venv/
|
└── avocado.csv
1Điều này sẽ đảm bảo kho lưu trữ của bạn không theo dõi các tệp không cần thiết. Bây giờ hãy cam kết các tệp dự án của bạn
avocado_analytics/
|
├── venv/
|
└── avocado.csv
2Trước bước cuối cùng, hãy đảm bảo rằng bạn đã chuẩn bị sẵn mọi thứ. Cấu trúc dự án của bạn sẽ trông như thế này
avocado_analytics/
|
├── venv/
|
└── avocado.csv
3Cuối cùng, bạn cần tạo một ứng dụng trong Heroku, đẩy mã của bạn vào đó bằng Git và khởi động ứng dụng ở một trong các tùy chọn máy chủ miễn phí của Heroku. Bạn có thể làm điều đó bằng cách chạy các lệnh sau
avocado_analytics/
|
├── venv/
|
└── avocado.csv
4Lệnh đầu tiên sẽ tạo một ứng dụng mới trên Heroku và kho lưu trữ Git được liên kết. Cái thứ hai sẽ đẩy các thay đổi vào kho lưu trữ đó và cái thứ ba sẽ khởi động ứng dụng của bạn ở một trong các tùy chọn máy chủ miễn phí của Heroku
Đó là nó. Bạn đã xây dựng và triển khai trang tổng quan của mình. Bây giờ bạn chỉ cần truy cập để chia sẻ cho bạn bè của mình. Để truy cập ứng dụng của bạn, hãy sao chép
$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
90 trong trình duyệt của bạn và thay thế $ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
91 bằng tên bạn đã xác định ở bước trướcNếu bạn tò mò, hãy xem một ứng dụng mẫu
Sự kết luận
Xin chúc mừng. Bạn vừa xây dựng, tùy chỉnh và triển khai trang tổng quan đầu tiên của mình bằng Dash. Bạn đã chuyển từ bảng điều khiển đơn giản sang bảng điều khiển tương tác đầy đủ được triển khai trên Heroku
Với kiến thức này, bạn có thể sử dụng Dash để xây dựng các ứng dụng phân tích để chia sẻ với những người khác. Khi ngày càng có nhiều công ty chú trọng hơn vào việc sử dụng dữ liệu, thì việc biết cách sử dụng Dash sẽ làm tăng tác động của bạn tại nơi làm việc. Điều từng là công việc chỉ chuyên gia mới có thể thực hiện, giờ bạn có thể làm trong một buổi chiều
Trong hướng dẫn này, bạn đã học
- Cách tạo bảng điều khiển bằng Dash
- Cách tùy chỉnh kiểu dáng ứng dụng Dash của bạn
- Cách làm cho ứng dụng của bạn tương tác bằng cách sử dụng các thành phần Dash
- Gọi lại là gì và bạn có thể sử dụng chúng như thế nào để tạo các ứng dụng tương tác
- Cách triển khai ứng dụng của bạn trên Heroku
Bây giờ bạn đã sẵn sàng để phát triển các ứng dụng Dash mới. Tìm một tập dữ liệu, nghĩ về một số hình ảnh trực quan thú vị và xây dựng một trang tổng quan khác
Bạn có thể tải xuống mã nguồn, dữ liệu và tài nguyên cho các ứng dụng mẫu mà bạn đã thực hiện trong hướng dẫn này bằng cách nhấp vào liên kết bên dưới
Lấy mã nguồn. Nhấp vào đây để lấy mã nguồn mà bạn sẽ sử dụng để tìm hiểu về cách tạo giao diện trực quan hóa dữ liệu bằng Python với Dash trong hướng dẫn này
Đánh dấu là đã hoàn thành
Xem ngay Hướng dẫn này có một khóa học video liên quan do nhóm Real Python tạo. Xem nó cùng với hướng dẫn bằng văn bản để hiểu sâu hơn. Giao diện trực quan hóa dữ liệu trong Python với Dash
🐍 Thủ thuật Python 💌
Nhận một Thủ thuật Python ngắn và hấp dẫn được gửi đến hộp thư đến của bạn vài ngày một lần. Không có thư rác bao giờ. Hủy đăng ký bất cứ lúc nào. Được quản lý bởi nhóm Real Python
Gửi cho tôi thủ thuật Python »
Giới thiệu về Dylan Castillo
Dylan là Nhà khoa học dữ liệu và nhà phát triển tự học chuyên về Xử lý ngôn ngữ tự nhiên [NLP]. Anh ấy có kinh nghiệm làm việc trong các dự án Machine Learning quy mô lớn và thích viết về các chủ đề liên quan đến dữ liệu
» Thông tin thêm về DylanMỗi hướng dẫn tại Real Python được tạo bởi một nhóm các nhà phát triển để nó đáp ứng các tiêu chuẩn chất lượng cao của chúng tôi. Các thành viên trong nhóm đã làm việc trong hướng dẫn này là
Aldren
David
Geir Arne
Joanna
Gia-cốp
Bậc thầy Kỹ năng Python trong thế giới thực Với quyền truy cập không giới hạn vào Python thực
Tham gia với chúng tôi và có quyền truy cập vào hàng nghìn hướng dẫn, khóa học video thực hành và cộng đồng các Pythonistas chuyên gia
Nâng cao kỹ năng Python của bạn »
Bậc thầy Kỹ năng Python trong thế giới thực
Với quyền truy cập không giới hạn vào Python thực
Tham gia với chúng tôi và có quyền truy cập vào hàng ngàn hướng dẫn, khóa học video thực hành và cộng đồng các chuyên gia Pythonistas
Nâng cao kỹ năng Python của bạn »
Bạn nghĩ sao?
Đánh giá bài viết này
Tweet Chia sẻ Chia sẻ EmailBài học số 1 hoặc điều yêu thích mà bạn đã học được là gì?
Mẹo bình luận. Những nhận xét hữu ích nhất là những nhận xét được viết với mục đích học hỏi hoặc giúp đỡ các sinh viên khác. Nhận các mẹo để đặt câu hỏi hay và nhận câu trả lời cho các câu hỏi phổ biến trong cổng thông tin hỗ trợ của chúng tôi