Làm cách nào để đọc dấu gạch nối trong python?

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

  1. Flask cung cấp chức năng máy chủ web
  2. Phản ứng. js hiển thị giao diện người dùng của trang web
  3. â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áo

Bắ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

  1. Tạo một thư mục có tên là
    avocado_analytics/
    |
    ├── venv/
    |
    └── avocado.csv
    
    5
  2. Di chuyển vị trí hiện tại của bạn đến thư mục
    avocado_analytics/
    |
    ├── venv/
    |
    └── avocado.csv
    
    5
  3. Tạo một môi trường ảo sạch có tên là
    avocado_analytics/
    |
    ├── venv/
    |
    └── avocado.csv
    
    7 bên trong thư mục đó

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ày

avocado_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áo

Cá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

  1. 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
  2. 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

  •  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 giúp bạn khởi tạo ứng dụng của mình
  •  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 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ày
  •  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 cho phép bạn truy cập các thẻ HTML
  •  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 giúp bạn đọc và sắp xếp dữ liệu

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
25

Xá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
2

Mã 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 Dash

Cá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

  1. 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
  2. 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
29

Ngoà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 theo

Phầ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
1

Mã 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
14

Trê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 sau

Cuố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
1

Dò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ạn

Nó còn sống. Trang tổng quan của bạn sẽ trông như thế này

Làm cách nào để đọc dấu gạch nối trong python?

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áo

Tạ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

  1. Sử dụng đối số
    avocado_analytics/
    |
    ├── venv/
    |
    └── avocado.csv
    
    18 của các thành phần riêng lẻ
  2. 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 đặt

Ghi 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
47

Nế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
5

Tạ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 pixel

Nhượ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ỉnh

Nế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 đây

Sau đó, 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ẻ HTML

Nế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
1

Bạ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
05

Tiế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áo

Cá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ình

Thê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ưới

kiểu. cssHiện/Ẩn

$ mkdir avocado_analytics && cd avocado_analytics
$ python3 -m venv venv
$ source venv/bin/activate
2

Tệ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
3

Khi 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
4

Trê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 Analytics

Trê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
5

Trê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

  1. 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
  2. Có một đối số
    avocado_analytics/
    |
    ├── venv/
    |
    └── avocado.csv
    
    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 trong
    $ mkdir avocado_analytics && cd avocado_analytics
    $ python3 -m venv venv
    $ source venv/bin/activate
    
    11, bộ chọn này sẽ xác định giao diện của từng thành phần

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
6

Dò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 CSS

Sự 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
7

Trong 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ì
    $ mkdir avocado_analytics && cd avocado_analytics
    $ python3 -m venv venv
    $ source venv/bin/activate
    
    40, nó sẽ hiển thị là
    $ mkdir avocado_analytics && cd avocado_analytics
    $ python3 -m venv venv
    $ source venv/bin/activate
    
    41
  • 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
    avocado_analytics/
    |
    ├── venv/
    |
    └── avocado.csv
    
    29 với lớp
    $ mkdir avocado_analytics && cd avocado_analytics
    $ python3 -m venv venv
    $ source venv/bin/activate
    
    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ó

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ày

Làm cách nào để đọc dấu gạch nối trong python?

Trong 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áo

Thê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
9

Tiế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ưới

kiểu. cssHiện/Ẩn

(venv) $ python -m pip install dash==1.13.3 pandas==1.0.5
0

Bâ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
1

Trê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ệu

Làm cách nào để đọc dấu gạch nối trong python?

Thà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
2

Trê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ố

  • avocado_analytics/
    |
    ├── venv/
    |
    └── avocado.csv
    
    10 là định danh của phần tử này
  • $ mkdir avocado_analytics && cd avocado_analytics
    $ python3 -m venv venv
    $ source venv/bin/activate
    
    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
  • avocado_analytics/
    |
    ├── venv/
    |
    └── avocado.csv
    
    19 là một bộ chọn lớp được sử dụng để áp dụng các kiểu

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
3

Trê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ày

Loại bỏ các quảng cáo

Cá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
4

Trê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
62

Trướ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ố

  1. Mã định danh của phần tử mà họ sẽ sửa đổi khi hàm thực thi
  2. 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
67

Sau đó, 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ố

  1. Mã định danh của phần tử họ sẽ theo dõi các thay đổi
  2. 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 đổi

Ghi 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ào

Cuố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
6

Phầ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
7

Khi 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ụng

Tiế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
8

Bạ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ình

Bâ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
9

Tệ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ạn

Tiế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
2

Trướ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
3

Cuố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
4

Lệ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ước

Nếu bạn tò mò, hãy xem một ứng dụng mẫu

Loại bỏ các quảng cáo

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

Làm cách nào để đọc dấu gạch nối trong python?

Gửi cho tôi thủ thuật Python »

Giới thiệu về Dylan Castillo

Làm cách nào để đọc dấu gạch nối trong python?
Làm cách nào để đọc dấu gạch nối trong python?

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ề Dylan


Mỗ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à

Làm cách nào để đọc dấu gạch nối trong python?

Aldren

Làm cách nào để đọc dấu gạch nối trong python?

David

Làm cách nào để đọc dấu gạch nối trong python?

Geir Arne

Làm cách nào để đọc dấu gạch nối trong python?

Joanna

Làm cách nào để đọc dấu gạch nối trong python?

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

Làm cách nào để đọc dấu gạch nối trong python?

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ẻ Email

Bà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

Bạn có thể sử dụng dấu gạch nối trong Python không?

Các gói và mô-đun Python không thể sử dụng dấu gạch ngang , chỉ có dấu gạch dưới. Phần này của PEP-8 cung cấp cho chúng tôi hướng dẫn. Tên gói và mô-đun. Các mô-đun nên có tên ngắn, toàn chữ thường. Dấu gạch dưới có thể được sử dụng trong tên mô-đun nếu nó cải thiện khả năng đọc.

Dấu gạch nối sau mã cho biết điều gì?

A. Dấu gạch ngang hoặc dấu gạch ngang (-) ở cuối mã Chỉ mục theo thứ tự chữ cái cho biết rằng các ký tự bổ sung được yêu cầu trên mã (mã này chưa hoàn chỉnh). Để tìm mã cụ thể nhất với các ký tự bổ sung, người viết mã sẽ tra cứu mã Chỉ mục theo bảng chữ cái hoàn chỉnh cụ thể hơn trong Danh sách dạng bảng.

và %% trong Python là gì?

Ký hiệu % trong Python được gọi là Toán tử Modulo . Nó trả về phần còn lại của phép chia toán hạng bên trái cho toán hạng bên phải.

Dấu gạch ngang trên bàn phím là gì?

Đã cập nhật. 18/11/2022 by Computer Hope. Còn được gọi là dấu gạch ngang, dấu trừ, dấu âm hoặc dấu trừ, dấu gạch nối ( - ) là dấu chấm câu trên phím gạch dưới bên cạnh phím "0" trên bàn phím Hoa Kỳ. Pictured is an example of the hyphen and underscore key on top of the keyboard.