Dash là một khung Python mã nguồn mở được sử dụng để xây dựng các ứng dụng web phân tích. Đây là một thư viện mạnh giúp đơn giản hóa việc phát triển các ứng dụng dựa trên dữ liệu. Nó đặc biệt hữu ích cho các nhà khoa học dữ liệu Python, những người không rành về phát triển web. Người dùng có thể tạo bảng điều khiển tuyệt vời trong trình duyệt của họ bằng cách sử dụng dấu gạch ngang
Được xây dựng trên Plotly. js, React và Flask, Dash liên kết các yếu tố giao diện người dùng hiện đại như trình đơn thả xuống, thanh trượt và biểu đồ trực tiếp với mã python phân tích của bạn
Các ứng dụng Dash bao gồm một máy chủ Flask giao tiếp với các thành phần React mặt trước bằng cách sử dụng các gói JSON qua các yêu cầu HTTP
Các ứng dụng Dash được viết hoàn toàn bằng python, vì vậy KHÔNG cần HTML hoặc JavaScript
Thiết lập dấu gạch ngang
Nếu Dash chưa được cài đặt trong thiết bị đầu cuối của bạn, hãy cài đặt các thư viện Dash được đề cập bên dưới. Vì các thư viện này đang được phát triển tích cực, hãy cài đặt và nâng cấp thường xuyên. Python 2 và 3 cũng được hỗ trợ
- dấu gạch ngang cài đặt pip==0. 23. 1 # Phần phụ trợ dấu gạch ngang cốt lõi
- pip cài đặt dash-renderer==0. 13. 0 # Mặt trước dấu gạch ngang
- cài đặt pip dash-html-components==0. 11. 0 # thành phần HTML
- pip cài đặt dash-core-components==0. 26. 0 # Linh kiện tăng áp
- cài đặt pip theo sơ đồ == 3. 1. 0 # Thư viện vẽ đồ thị Plotly
Để đảm bảo mọi thứ hoạt động bình thường, tại đây, chúng tôi đã tạo một dashApp đơn giản. tập tin py
Dash hoặc bố cục ứng dụng
Ứng dụng Dash bao gồm hai phần. Phần đầu tiên là “bố cục” của ứng dụng mô tả cơ bản giao diện của ứng dụng. Phần thứ hai mô tả tính tương tác của ứng dụng
Thành phần cốt lõi
Chúng ta có thể xây dựng bố cục với dash_html_components và thư viện dash_core_components. Dash cung cấp các lớp python cho tất cả các thành phần trực quan của ứng dụng. Chúng tôi cũng có thể tùy chỉnh các thành phần của riêng mình bằng JavaScript và React. js
nhập dash_core_components dưới dạng dcc
nhập dash_html_components dưới dạng html
dash_html_components dành cho tất cả các thẻ HTML trong đó dash_core_components dành cho tính tương tác được tạo bằng React. js
Sử dụng hai thư viện trên, chúng ta hãy viết mã như dưới đây -
app = dash.Dash[] app.layout = html.Div[children=[ html.H1[children='Hello Dash'], html.Div[children='''Dash Framework: A web application framework for Python.''']
Và mã HTML tương đương sẽ trông như thế này -
Hello Dash
Dash Framework: A web application framework for Python.
Viết ứng dụng Simple Dash
Chúng ta sẽ tìm hiểu cách viết một ví dụ đơn giản trên dấu gạch ngang bằng cách sử dụng thư viện đã đề cập ở trên trong một tệp dashApp. py
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash[]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
html.Div[children='''Dash Framework: A web application framework for Python.'''],
dcc.Graph[
id='example-graph',
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'Delhi'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Mumbai'},
],
'layout': {
'title': 'Dash Data Visualization'
}
}
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
Chạy ứng dụng Dash
Lưu ý các điểm sau khi chạy ứng dụng Dash
[MyDjangoEnv] C. \Users\rajesh\Desktop\MyDjango\dash>python dashApp1. py
Phục vụ ứng dụng Flask "dashApp1" [tải chậm]
Môi trường. sản lượng
CẢNH BÁO. Không sử dụng máy chủ phát triển trong môi trường sản xuất
Thay vào đó, hãy sử dụng máy chủ WSGI sản xuất
Chế độ kiểm tra sửa lỗi. trên
Khởi động lại với stat
Trình gỡ lỗi đang hoạt động
mã PIN trình gỡ lỗi. 130-303-947
Chạy trên http. //127. 0. 0. 1. 8050/ [Nhấn CTRL+C để thoát]
127.0.0.1 - - [12/Aug/2018 09:32:39] "GET / HTTP/1.1" 200 - 127.0.0.1 - - [12/Aug/2018 09:32:42] "GET /_dash-layout HTTP/1.1" 200 - 127.0.0.1 - - [12/Aug/2018 09:32:42] "GET /_dash-dependencies HTTP/1.1" 200 - 127.0.0.1 - - [12/Aug/2018 09:32:42] "GET /favicon.ico HTTP/1.1" 200 - 127.0.0.1 - - [12/Aug/2018 09:39:52] "GET /favicon.ico HTTP/1.1" 200 -
Truy cập http. 127. 0. 0. 1. 8050/ trong trình duyệt web của bạn. Bạn sẽ thấy một ứng dụng trông như thế này
Trong chương trình trên, một số điểm quan trọng cần lưu ý như sau -
Bố cục ứng dụng bao gồm một cây gồm các "thành phần" như html. Div và dcc. đồ thị
Thư viện dash_html_components có một thành phần cho mọi thẻ HTML. Html. Thành phần H1 [con = ‘Xin chào Dấu gạch ngang’] tạo ra một
Xin chào phần tử DashHTML trong ứng dụng của bạnKhông phải tất cả các thành phần đều là HTML thuần túy. dash_core_components mô tả các thành phần cấp cao hơn tương tác và được tạo bằng JavaScript, HTML và CSS thông qua React. thư viện js
Mỗi thành phần được mô tả toàn bộ thông qua các thuộc tính từ khóa. Dash là khai báo. bạn sẽ chủ yếu mô tả ứng dụng của mình thông qua các thuộc tính này
Tài sản con cái là đặc biệt. Theo quy ước, nó luôn là thuộc tính đầu tiên, nghĩa là bạn có thể bỏ qua nó
Html. H1 [con=’Xin chào Dấu gạch ngang’] giống như html. H1 ['Xin chào dấu gạch ngang']
Các phông chữ trong ứng dụng của bạn sẽ trông hơi khác một chút so với những gì được hiển thị ở đây. Ứng dụng này đang sử dụng biểu định kiểu CSS tùy chỉnh để sửa đổi kiểu mặc định của các phần tử. Cho phép kiểu phông chữ tùy chỉnh, nhưng hiện tại, chúng tôi có thể thêm URL bên dưới hoặc bất kỳ URL nào bạn chọn -
ứng dụng. css. append_css [{“external_url”. https. // codepen. io/chriddyp/pen/bwLwgP. css}] để tệp của bạn có giao diện giống như các ví dụ này
Tìm hiểu thêm về HTML
Thư viện dash_html_components chứa một lớp thành phần cho mọi thẻ HTML cũng như các đối số từ khóa cho tất cả các đối số HTML
Hãy để chúng tôi thêm kiểu nội tuyến của các thành phần trong văn bản ứng dụng trước của chúng tôi -
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash[]
colors = {
'background': '#87D653',
'text': '#ff0033'
}
app.layout = html.Div[style={'backgroundColor': colors['background']}, children=[
html.H1[
children='Hello Dash',
style={
'textAlign': 'center',
'color': colors['text']
}
],
html.Div[children='Dash: A web application framework for Python.', style={
'textAlign': 'center',
'color': colors['text']
}],
dcc.Graph[
id='example-graph-2',
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'Delhi'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Mumbai'},
],
'layout': {
'plot_bgcolor': colors['background'],
'paper_bgcolor': colors['background'],
'font': {
'color': colors['text']
}
}
}
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
Trong ví dụ trên, chúng tôi đã sửa đổi kiểu nội tuyến của html. div và html. Các thành phần H1 với thuộc tính style
Nó được hiển thị trong ứng dụng Dash như sau -
Có một vài điểm khác biệt chính giữa dash_html_components và thuộc tính HTML –
Đối với thuộc tính kiểu trong Dash, bạn chỉ cần cung cấp một từ điển, trong khi ở HTML, đó là chuỗi được phân tách bằng dấu chấm phẩy
Các khóa từ điển kiểu là camelCased, do đó, căn chỉnh văn bản sẽ thay đổi thành căn chỉnh văn bản
ClassName trong Dash tương tự như thuộc tính lớp HTML
Đối số đầu tiên là con của thẻ HTML được chỉ định thông qua đối số từ khóa con
Thành phần tái sử dụng
Bằng cách viết đánh dấu của chúng ta bằng Python, chúng ta có thể tạo các thành phần phức tạp có thể tái sử dụng như bảng mà không cần chuyển ngữ cảnh hoặc ngôn ngữ -
Dưới đây là một ví dụ nhanh tạo “Bảng” từ khung dữ liệu gấu trúc
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
df = pd.read_csv[
'//gist.githubusercontent.com/chriddyp/'
'c78bf172206ce24f77d6363a2d754b59/raw/'
'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
'usa-agricultural-exports-2011.csv']
def generate_table[dataframe, max_rows=10]:
return html.Table[
# Header
[html.Tr[[html.Th[col] for col in dataframe.columns]]] +
# Body
[html.Tr[[
html.Td[dataframe.iloc[i][col]] for col in dataframe.columns
]] for i in range[min[len[dataframe], max_rows]]]
]
app = dash.Dash[]
app.layout = html.Div[children=[
html.H4[children='US Agriculture Exports [2011]'],
generate_table[df]
]]
if __name__ == '__main__':
app.run_server[debug=True]
Đầu ra của chúng tôi sẽ giống như -
Tìm hiểu thêm về Trực quan hóa
Thư viện dash_core_components bao gồm một thành phần có tên là Graph
Biểu đồ hiển thị trực quan hóa dữ liệu tương tác bằng cách sử dụng sơ đồ mã nguồn mở. thư viện đồ họa js JavaScript. âm mưu. js hỗ trợ khoảng 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
Dưới đây là một ví dụ tạo biểu đồ phân tán từ khung dữ liệu Pandas -
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
app = dash.Dash[]
df = pd.read_csv[
'//gist.githubusercontent.com/chriddyp/' +
'5d1ea79569ed194d432e56108a04d188/raw/' +
'a9f9e8076b837d541398e999dcbac2b2826a81f8/'+
'gdp-life-exp-2007.csv']
app.layout = html.Div[[
dcc.Graph[
id='life-exp-vs-gdp',
figure={
'data': [
go.Scatter[
x=df[df['continent'] == i]['gdp per capita'],
y=df[df['continent'] == i]['life expectancy'],
text=df[df['continent'] == i]['country'],
mode='markers',
opacity=0.7,
marker={
'size': 15,
'line': {'width': 0.5, 'color': 'white'}
},
name=i
] for i in df.continent.unique[]
],
'layout': go.Layout[
xaxis={'type': 'log', 'title': 'GDP Per Capita'},
yaxis={'title': 'Life Expectancy'},
margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
legend={'x': 0, 'y': 1},
hovermode='closest'
]
}
]
]]
if __name__ == '__main__':
app.run_server[]
Đầu ra của đoạn mã trên như sau -
Những biểu đồ này tương tác và đáp ứng. Bạn có thể di chuột qua các điểm để xem giá trị của chúng, nhấp vào các mục chú thích để chuyển đổi dấu vết, nhấp và kéo để thu phóng, giữ phím shift và nhấp và kéo để xoay
đánh dấu
Mặc dù dấu gạch ngang thể hiện các hương vị HTML thông qua thư viện dash_html_components, nhưng việc viết bản sao của bạn bằng HTML có thể rất tẻ nhạt. Để viết các khối văn bản, bạn có thể sử dụng thành phần Markdown trong thư viện dash_core_components
Thành phần cốt lõi
dash_core_components bao gồm một tập hợp các thành phần cấp cao hơn như danh sách thả xuống, biểu đồ, đánh dấu, khối và nhiều thành phần khác
Giống như tất cả các thành phần khác của Dash, chúng được mô tả hoàn toàn theo cách khai báo. Mọi tùy chọn có thể định cấu hình đều khả dụng dưới dạng đối số từ khóa của thành phần
Dưới đây là ví dụ, sử dụng một số thành phần có sẵn -
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash[]
app.layout = html.Div[[
html.Label['Dropdown'],
dcc.Dropdown[
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='MTL'
],
html.Label['Multi-Select Dropdown'],
dcc.Dropdown[
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value=['MTL', 'SF'],
multi=True
],
html.Label['Radio Items'],
dcc.RadioItems[
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='MTL'
],
html.Label['Checkboxes'],
dcc.Checklist[
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
values=['MTL', 'SF']
],
html.Label['Text Input'],
dcc.Input[value='MTL', type='text'],
html.Label['Slider'],
dcc.Slider[
min=0,
max=9,
marks={i: 'Label {}'.format[i] if i == 1 else str[i] for i in range[1, 6]},
value=5,
],
], style={'columnCount': 2}]
if __name__ == '__main__':
app.run_server[debug=True]
Đầu ra từ chương trình trên như sau -
Gọi trợ giúp
Các thành phần dấu gạch ngang là khai báo. Mọi khía cạnh có thể định cấu hình của các thành phần này được đặt trong khi cài đặt làm đối số từ khóa. Bạn có thể gọi trợ giúp trong bảng điều khiển python của mình trên bất kỳ thành phần nào để tìm hiểu thêm về thành phần và các đối số có sẵn của thành phần đó. Một số trong số chúng được đưa ra dưới đây -
________số 8_______Tóm lại, bố cục của ứng dụng Dash mô tả giao diện của ứng dụng. Bố cục là một cây phân cấp của các thành phần. Thư viện dash_html_components cung cấp các lớp cho tất cả các thẻ HTML và đối số từ khóa, đồng thời mô tả các thuộc tính HTML như kiểu, tên lớp và id. Thư viện dash_core_components tạo các thành phần cấp cao hơn như điều khiển và biểu đồ