Khung Dash
Trong chương này, chúng ta sẽ thảo luận chi tiết về khuôn khổ Dash.
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. Nó là một thư viện mạnh mẽ giúp đơn giản hóa việc phát triển các ứng dụng theo hướng 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 trang tổng quan tuyệt vời trong trình duyệt của họ bằng dấu gạch ngang.
Được xây dựng dựa trên Plotly.js, React và Flask, Dash liên kết các phần tử giao diện người dùng hiện đại như trình đơn thả xuống, thanh trượt và đồ thị trực tiếp với mã python phân tích của bạn.
Ứ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 front-end 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 Dash
Nếu Dash chưa được cài đặt trong thiết bị đầu cuối của bạn, thì 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ợ.
- pip install dash == 0.23.1 # Phần phụ trợ gạch ngang cốt lõi
- pip install dash-render == 0.13.0 # Giao diện người dùng dash
- pip cài đặt dash-html-components == 0.11.0 # thành phần HTML
- pip cài đặt dash-core-components == 0.26.0 # Các thành phần siêu nạp
- pip cài đặt plotly == 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 tệp dashApp.py đơn giản.
Dấu gạch ngang 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ả về cơ bản ứ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.
Thành phần cốt lõi
Chúng tôi có thể xây dựng bố cục với dash_html_components và dash_core_componentsthư viện. 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 với 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ương tác được xây dựng 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 -
<div>
<h1> Hello Dash </h1>
<div> Dash Framework: A web application framework for Python. </div>
</div>Viết ứng dụng Dash đơn giản
Chúng ta sẽ học 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 ý những điểm sau khi chạy ứng dụng Dash.
(MyDjangoEnv) C: \ Users \ rajesh \ Desktop \ MyDjango \ dash> python dashApp1.py
Đang cung cấp ứng dụng Flask "dashApp1" (tải chậm)
Môi trường: sản xuất
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.
Sử dụng máy chủ WSGI sản xuất thay thế.
Chế độ gỡ lỗi: bật
Khởi động lại với stat
Trình gỡ lỗi đang hoạt động!
Mã PIN của trình gỡ lỗi: 130-303-947
Đang chạy 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 -Chuyến thăm 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 giố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 "thành phần" như html.Div và dcc.Graph.
Thư viện dash_html_components có một thành phần cho mọi thẻ HTML. Thành phần html.H1 (children = 'Hello Dash') tạo phần tử HTML <h1> Hello Dash </h1> trong ứng dụng của bạn.
Khô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 có tính tương tác và được tạo bằng JavaScript, HTML và CSS thông qua thư viện React.js.
Mỗi thành phần được mô tả hoàn toàn thông qua các thuộc tính từ khóa. Dấu gạch ngang mang tính 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 trẻ em là đặc biệt. Theo quy ước, nó luôn là thuộc tính đầu tiên có nghĩa là bạn có thể bỏ qua nó.
Html.H1 (children = 'Hello Dash') cũng giống như html.H1 ('Hello Dash').
Các phông chữ trong ứng dụng của bạn sẽ 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ử. Kiểu phông chữ tùy chỉnh được phép, 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 -
app.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.
Thông tin 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 các thành phần html.Div và html.H1 bằng thuộc tính style.
Nó được hiển thị trong ứng dụng Dash như sau:
Có một số điểm khác biệt chính giữa thuộc tính dash_html_components và HTML -
Đối với thuộc tính style trong Dash, bạn chỉ có thể cung cấp một từ điển, trong khi trong HTML, nó 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, vì vậy text-align sẽ thay đổi thành textalign.
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.
Các thành phần có thể tái sử dụng
Bằng cách viết đánh dấu của chúng tôi bằng Python, chúng tôi 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 đổi 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(
'https://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ư -
Thông tin thêm về Trực quan hóa
Thư viện dash_core_components bao gồm một thành phần được gọi 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 thư viện vẽ đồ thị mã nguồn mở plotly.js JavaScript. Plotly.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à 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(
'https://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:
Các biểu đồ này có tính tương tác và phản hồi nhanh. 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ú giải để 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.
Markdown
Mặc dù dấu gạch ngang thể hiện hương vị HTML thông qua thư viện dash_html_components, nhưng có thể tẻ nhạt khi viết bản sao của bạn bằng HTML. Để 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ư trình đơn 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 Dash khác, chúng được mô tả hoàn toàn mang tính khai báo. Mọi tùy chọn có thể định cấu hình đều có sẵn 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)Kết quả từ chương trình trên như sau:
Gọi trợ giúp
Thành phần dấu gạch ngang có tính chất khai báo. Mọi khía cạnh có thể cấu hình của các thành phần này được đặt trong quá trình 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ề một thành phần và các đối số có sẵn của nó. Một số trong số chúng được đưa ra dưới đây -
>>> help(dcc.Dropdown)
Help on class Dropdown in module builtins:
class Dropdown(dash.development.base_component.Component)
| A Dropdown component.
| Dropdown is an interactive dropdown element for selecting one or more
| items.
| The values and labels of the dropdown items are specified in the `options`
| property and the selected item(s) are specified with the `value` property.
|
| Use a dropdown when you have many options (more than 5) or when you are
| constrained for space. Otherwise, you can use RadioItems or a Checklist,
| which have the benefit of showing the users all of the items at once.
|
| Keyword arguments:
| - id (string; optional)
| - options (list; optional): An array of options
| - value (string | list; optional): The value of the input. If `multi` is false (the default)
-- More --Tóm lại, bố cục của ứng dụng Dash mô tả ứng dụng đó trông như thế nào. Bố cục là một cây phân cấp 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à các đối số từ khóa, đồng thời mô tả các thuộc tính HTML như style, className 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à đồ thị.