Cài đặt dấu gạch ngang
Yêu cầu máy cài sẵn Python 3.
In terminal run command after to install Dash.
pip install dash
Với lệnh trên thì ngoài dấu gạch ngang, pip cũng sẽ cài đặt thư viện hỗ trợ vẽ đồ thị đó là Plotly. py.
Và cuối cùng chúng ta cần cài đặt thư viện Pandas bằng lệnh
pip install pandas
Go Pandas
Pandas is a open library library was play on the BSD BSD. Pandas cung cấp các cấu trúc dữ liệu có hiệu suất cao, dễ sử dụng và các công cụ phân tích dữ liệu cho ngôn ngữ lập trình Python
Pandas cung cấp 2 cấu trúc dữ liệu chính là DataFrame và Series. DataFrame là một cấu trúc dữ liệu 2 chiều có thể lưu trữ dữ liệu thuộc các loại khác nhau [bao gồm các ký tự, số nguyên, giá trị dấu phẩy động, phân loại dữ liệu và hơn thế nữa] trong các cột. Mỗi cột trong DataFrame là một chuỗi
Có ba quy ước phổ biến để lưu trữ dữ liệu dưới dạng cột
- Dữ liệu dạng dài có một hàng cho mỗi quan sát và một cột cho mỗi biến. Điều này phù hợp để lưu trữ và hiển thị dữ liệu đa biến, tức thời với số lượng lớn hơn 2
- Dữ liệu định dạng rộng có một hàng cho mỗi giá trị của một biến đầu tiên và một cột cho mỗi giá trị của biến thứ hai. Điều này phù hợp để lưu trữ và hiển thị dữ liệu 2D
- Hỗn hợp dữ liệu dạng dữ liệu là kết hợp của dữ liệu dạng dài và dữ liệu dạng rộng
Bố cục dấu gạch ngang
Ứng dụng Dash bao gồm hai phần. Phần đầu tiên là “bố cục” của ứng dụng và nó mô tả ứng dụng trông như thế nào. Phần thứ hai mô tả khả năng tương tác của ứng dụng, nó là “callbacks”.
“Layout” là 1 cây tập hợp các “thành phần“
Dash cung cấp rất nhiều loại thành phần. Các thành phần HTML của Dash, các thành phần cốt lõi của Dash, Dash DataTable, Dash DAQ, các thành phần Bootstrap của Dash,…
Trong khuôn khổ của bài viết, chúng ta sẽ tìm hiểu các Thành phần HTML của Dash và các Thành phần cốt lõi của Dash
Các thành phần HTML của dấu gạch ngang
Là chức năng cung cấp các kiểu thành phần HTML, dùng để định nghĩa các thẻ HTML cho bố cục
Để sử dụng các Thành phần HTML của Dash, chúng ta cần nhập vào tệp. py as after. pip install pandas
9
Ví dụ
html_demo. py
import dash from dash import html app = dash.Dash[__name__] app.layout = html.Div[children=[ html.H1[children='Hello Dash'], ]] if __name__ == '__main__': app.run_server[debug=True]
import dash
from dash import html
app = dash.Dash[__name__]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
]]
if __name__ == '__main__':
app.run_server[debug=True]
0 sẽ tạo ra import dash
from dash import html
app = dash.Dash[__name__]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
]]
if __name__ == '__main__':
app.run_server[debug=True]
1 trên trình duyệt
Cũng giống như các thẻ HTML, chúng ta hoàn toàn có thể thay đổi kiểu của html_component bằng thuộc tính “kiểu“
Ví dụ. import dash
from dash import html
app = dash.Dash[__name__]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
]]
if __name__ == '__main__':
app.run_server[debug=True]
2
Đoạn mã trên được hiển thị dưới dạng import dash
from dash import html
app = dash.Dash[__name__]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
]]
if __name__ == '__main__':
app.run_server[debug=True]
3
Có một số khác biệt quan trọng giữa các Thành phần HTML của Dash và các thuộc tính HTML
- Thuộc tính “kiểu” trong HTML là một chuỗi được phân tách bằng dấu chấm phẩy. Trong Dash, bạn cần cung cấp một từ điển
- Các khóa trong từ điển là dạng camelCased. Vì vậy, thay vì “text-align“, trong Dash là “textAlign“
- Thuộc tính “class” trong HTML là “className” trong Dash
- Con of the HTML tag is only default through argument with the keyword “ children“
Hết sức thay vì sử dụng style trực tiếp chúng ta có thể sử dụng tệp CSS để định nghĩa style cho bố cục, chi tiết tham khảo. https. // dấu gạch ngang. âm mưu. com/tài nguyên bên ngoài
Bạn có thể xem tất cả các thành phần có sẵn trong Thư viện thành phần HTML của Dash. https. // dấu gạch ngang. âm mưu. com/dash-html-thành phần
Thành phần cốt lõi của Dash
Bao gồm một tập hợp các thành phần cao cấp hơn như dropdown, checkbox, radio, graph, v. v. Bạn có thể xem tất cả các thành phần có sẵn trong Thư viện thành phần cốt lõi của Dash. https. // dấu gạch ngang. âm mưu. com/dash-core-components
Để sử dụng Dash Core Components, chúng ta cần nhập vào tệp. py as after. import dash
from dash import html
app = dash.Dash[__name__]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
]]
if __name__ == '__main__':
app.run_server[debug=True]
4
Trong các thành phần cốt lõi thì “Graph” là thành phần quan trọng đối với Trực quan hóa dữ liệu. “Đồ thị” hiển thị trực tiếp số liệu hóa trên trình duyệt bằng cách sử dụng thư viện javascript vẽ đồ thị mã nguồn mở Plotly. js. âm mưu. js hỗ trợ hơn 35 loại biểu đồ và hiển thị biểu đồ ở cả SVG chất lượng vector và WebGL hiệu suất cao. Một lưu ý nhỏ ở đây là Plotly. js only used to render up browser [do Dash thực hiện] còn khi code chúng ta sẽ sử dụng thư viện Plotly. py [được cung cấp sẵn khi cài đặt Dash] chứ không phải mã trực tiếp bằng javascript
Để biết cách sử dụng thành phần “Graph”, chúng ta hãy đến với ví dụ hiển thị dữ liệu csv lên trình duyệt dưới dạng đồ thị đường gấp khúc
csv/graph_sample. csv
DateTime,DATA 1,DATA 2,DATA 3,DATA 4 20211220 101010.000,30,100,124,197 20211220 101010.010,40,110,134,65 20211220 101010.020,50,140,214,149 20211220 101010.030,60,150,169,-98 20211220 101010.040,70,160,204,-173 20211220 101010.050,80,170,164,-108 20211220 101010.060,90,180,148,150 20211220 101010.070,100,190,180,92 20211220 101010.080,110,200,268,94 20211220 101010.090,120,210,164,-139 20211220 101010.100,130,220,254,-132
Đầu tiên chúng ta cần sử dụng pandas để tải tệp csv
pip install pandas0
Trong biến df ra console, hãy xem thử cấu trúc của nó
pip install pandas1
Đến đây bạn có thấy hơi quen không?
Bước tiếp theo chúng ta chuyển dữ liệu của cột DateTime từ chuỗi thành ngày giờ để biểu đồ của chúng ta hiển thị chính xác ngày và giờ của dữ liệu
pip install pandas2
Bây giờ chúng ta tạo một hình vẽ bằng biểu đồ
pip install pandas3
Truyền hình vào thành phần đồ thị
pip install pandas4
Hoàn tất chỉnh sửa mã
graph_demo. p
pip install pandas5
In terminal run command
pip install pandas0
Sau đó truy cập http. //127. 0. 0. 1. 8050/ to see results
Trong ví dụ trên
- Thư viện Pandas được sử dụng để xử lý dữ liệu đầu vào [đọc csv, chuyển dữ liệu của cột DateTime từ chuỗi thành ngày giờ]
- Plotly Express [nằm trong thư viện Plotly. py] người chịu trách nhiệm quy định các kiểu biểu đồ [đường gấp khúc, phân tán,…], trục x, trục y,… của Graph đầu ra
Gọi lại dấu gạch ngang
chức năng gọi lại. Các chức năng được Dash tự động gọi bất cứ khi nào thuộc tính của thành phần đầu vào thay đổi, để cập nhật một số thuộc tính trong thành phần khác [đầu ra]
Để hiểu về Callback chúng ta hãy đến với ví dụ về bộ lọc dữ liệu theo ngày, với đầu vào lấy từ thành phần dcc. Ngày PickerPhạm vi.
csv/callbacks_sample. csv
pip install pandas1
callbacks_demo. py
pip install pandas2
Trong Dash, các đầu vào và đầu ra của ứng dụng của chúng chỉ đơn giản là các thuộc tính của một thành phần cụ thể. Trong ví dụ này, đầu vào của chúng là thuộc tính “start_date” và “end_date” của thành phần có ID “date-picker-range“. Đầu ra của chúng ta là thuộc tính “figure” của thành phần có ID là “scatter-graph“
Bất cứ khi nào bất kỳ thuộc tính đầu vào nào thay đổi, chức năng có khai báo trang trí @callback sẽ được gọi tự động. Dash cung cấp cho hàm gọi lại giá trị mới này của thuộc tính đầu vào làm đối số [trong ví dụ về hàm update_figure có 2 argument là start_date, end_date], và Dash cập nhật property của output component với bất kỳ giá trị nào được function trả về [trong ví dụ trên function update_figure trả về scatter_fig].
Trong terminal chạy lệnh import dash
from dash import html
app = dash.Dash[__name__]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
]]
if __name__ == '__main__':
app.run_server[debug=True]
5 và truy cập vào http. //127. 0. 0. 1. 8050/ để xem kết quả.
Sau khi thay đổi end_date
Tối ưu hóa và chức năng bổ sung
Ở phần này chúng ta lấy mã ở phần Callbacks để tối ưu hóa và bổ sung chức năng cho nó
Read n DATA
Hiện tại chúng ta đang đặt lượng dữ liệu ban đầu là 4
pip install pandas3
Giả sử chúng ta có lượng dữ liệu bất kỳ DATA 1, DATA 2,…, DATA n thì với đoạn mã trên chúng ta chỉ có thể đọc và hiển thị được 4 dữ liệu mà thôi.
Để đọc và hiển thị lên biểu đồ n DATA, chúng ta cần chỉnh sửa mã lại một chút.
pip install pandas4
Đọc cấu hình từ tiêu đề của CSV
Tiêu đề đánh giá của CSV as after
pip install pandas5
Chúng ta sẽ bổ sung chức năng đọc cấu hình từ tiêu đề trên
- Đọc cấu hình của cột DateTime để đặt định dạng ngày giờ [hiện tại phần cứng được đặt trong mã].
- Đọc cấu hình minFilter, maxFilter của các cột DATA để lọc bỏ những dữ liệu có giá trị nhỏ hơn minFilter và lớn hơn maxFilter của cột DATA đó
First add file utils. py chứa các chức năng phổ biến
pip install pandas6
At the code phase on
- Hàm convert_py_datetime_format used to convert format type yyyyMMdd HH. mm. ss. fff to format of Python
- Hàm extract_csv_col_config sẽ nhận vào tên của cột chứa cấu hình và trả về tên cột đã cắt bỏ phần chuỗi cấu hình cùng với mảng chứa cấu hình của cột đó. Ví dụ
import dash from dash import html app = dash.Dash[__name__] app.layout = html.Div[children=[ html.H1[children='Hello Dash'], ]] if __name__ == '__main__': app.run_server[debug=True]
6 sẽ trả vềimport dash from dash import html app = dash.Dash[__name__] app.layout = html.Div[children=[ html.H1[children='Hello Dash'], ]] if __name__ == '__main__': app.run_server[debug=True]
7 và mảngimport dash from dash import html app = dash.Dash[__name__] app.layout = html.Div[children=[ html.H1[children='Hello Dash'], ]] if __name__ == '__main__': app.run_server[debug=True]
8
Tiếp theo thêm chức năng process_csv_variable vào ứng dụng. py
pip install pandas7
Hàm process_csv_variable sẽ nhận vào DataFrame, đọc cấu hình từ tên cột, xử lý dữ liệu dựa trên cấu hình và sẽ trả về DataFrame sau khi xử lý