Trang này chứa các ứng dụng ví dụ được xây dựng với các thành phần bootstrap. Kiểm tra trang GitHub của chúng tôi để biết thêm.
Nội phân Chính showShow
- Đồ thị trong các tab
- Bắt đầu nhanh chóng
- Thư viện thành phần mở rộng
- Có thể tùy chỉnh cao
- Xin chào Dash
- Thực hiện thay đổi đầu tiên của bạn
- Thêm về các thành phần HTML
- Xin chào Dash
- Thực hiện thay đổi đầu tiên của bạn
- Thêm về các thành phần HTML
- Các thành phần có thể tái sử dụng
- Thêm về trực quan
Dash và Markdown
- Đồ thị trong các tab
- Bắt đầu nhanh chóng
- Bắt đầu nhanh chóng
- Thư viện thành phần mở rộng
- Có thể tùy chỉnh cao
- Xin chào Dash
- Thực hiện thay đổi đầu tiên của bạn
- Thêm về các thành phần HTML
- Xin chào Dash
- Thực hiện thay đổi đầu tiên của bạn
- Thêm về các thành phần HTML
- Các thành phần có thể tái sử dụng
- Thêm về trực quan
Dash và Markdown
//127.0.0.1:8050/ in your web browser. from dash import Dash, html, dcc import plotly.express as px import pandas as pd app = Dash[__name__] # assume you have a "long-form" data frame # see //plotly.com/python/px-arguments/ for more options df = pd.DataFrame[{ "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"], "Amount": [4, 1, 2, 2, 4, 5], "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"] }] fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"] app.layout = html.Div[children=[ html.H1[children='Hello Dash'], html.Div[children=''' Dash: A web application framework for your data. '''], dcc.Graph[ id='example-graph', figure=fig ] ]] if __name__ == '__main__': app.run_server[debug=True]
Xin chào Dash
Thực hiện thay đổi đầu tiên của bạn
$ python app.py
...Running on //127.0.0.1:8050/ [Press CTRL+C to quit]
Thêm về các thành phần HTML
in your web browser. You should see an app that looks like the one above.
Note:
- Các thành phần có thể tái sử dụng
6import dash import dash_bootstrap_components as dbc app = dash.Dash[ external_stylesheets=[dbc.themes.BOOTSTRAP] ] app.layout = dbc.Alert[ "Hello, Bootstrap!", className="m-5" ] if __name__ == "__main__": app.run_server[]
and
7.import dash import dash_bootstrap_components as dbc app = dash.Dash[ external_stylesheets=[dbc.themes.BOOTSTRAP] ] app.layout = dbc.Alert[ "Hello, Bootstrap!", className="m-5" ] if __name__ == "__main__": app.run_server[]
Thêm về trực quan
Dash và Markdown
The
9import dash import dash_bootstrap_components as dbc app = dash.Dash[ external_stylesheets=[dbc.themes.BOOTSTRAP] ] app.layout = dbc.Alert[ "Hello, Bootstrap!", className="m-5" ] if __name__ == "__main__": app.run_server[]
component generates a
0 HTML element in your application.# Run this app with `python app.py` and # visit //127.0.0.1:8050/ in your web browser. from dash import Dash, html, dcc import plotly.express as px import pandas as pd app = Dash[__name__] # assume you have a "long-form" data frame # see //plotly.com/python/px-arguments/ for more options df = pd.DataFrame[{ "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"], "Amount": [4, 1, 2, 2, 4, 5], "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"] }] fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"] app.layout = html.Div[children=[ html.H1[children='Hello Dash'], html.Div[children=''' Dash: A web application framework for your data. '''], dcc.Graph[ id='example-graph', figure=fig ] ]] if __name__ == '__main__': app.run_server[debug=True]
3. Not all components are pure HTML.
The Dash Core Components module [
1]# Run this app with `python app.py` and # visit //127.0.0.1:8050/ in your web browser. from dash import Dash, html, dcc import plotly.express as px import pandas as pd app = Dash[__name__] # assume you have a "long-form" data frame # see //plotly.com/python/px-arguments/ for more options df = pd.DataFrame[{ "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"], "Amount": [4, 1, 2, 2, 4, 5], "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"] }] fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"] app.layout = html.Div[children=[ html.H1[children='Hello Dash'], html.Div[children=''' Dash: A web application framework for your data. '''], dcc.Graph[ id='example-graph', figure=fig ] ]] if __name__ == '__main__': app.run_server[debug=True]
contains higher-level components that are interactive and are generated with
JavaScript, HTML, and CSS through the React.js library.Thành phần cốt lõi
Dash is declarative: you will primarily describe your application
through these attributes.- Nội phân chính
- Thanh bên đơn giản
This application is using a custom CSS stylesheet and Dash Enterprise Design Kit
to modify the default styles of the elements. You can learn more about custom CSS in the
CSS tutorial.
Thực hiện thay đổi đầu tiên của bạn
Thêm về các thành phần HTML
you run your app with
# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd
app = Dash[__name__]
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
html.Div[children='''
Dash: A web application framework for your data.
'''],
dcc.Graph[
id='example-graph',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
5.This means that Dash
will automatically refresh your browser when you make a change in your code.
Các thành phần có thể tái sử dụng
# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd
app = Dash[__name__]
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
html.Div[children='''
Dash: A web application framework for your data.
'''],
dcc.Graph[
id='example-graph',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
6 or the # Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd
app = Dash[__name__]
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
html.Div[children='''
Dash: A web application framework for your data.
'''],
dcc.Graph[
id='example-graph',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
7 data. Your app should auto-refresh with your change.Thêm về trực quan
Learn more in Dash Dev Tools documentation
Questions? See the community forum hot reloading discussion.
Thêm về các thành phần HTML
Các thành phần có thể tái sử dụng
contains a component class for every HTML tag as
well as keyword arguments for all of the HTML arguments.
Thêm về trực quan
Create a file named
$ python app.py
...Running on //127.0.0.1:8050/ [Press CTRL+C to quit]
0 with the following code:# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
app = Dash[__name__]
colors = {
'background': '#111111',
'text': '#7FDBFF'
}
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
fig.update_layout[
plot_bgcolor=colors['background'],
paper_bgcolor=colors['background'],
font_color=colors['text']
]
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 your data.', style={
'textAlign': 'center',
'color': colors['text']
}],
dcc.Graph[
id='example-graph-2',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
Xin chào Dash
Dash và Markdown
Thành phần cốt lõi
import dash
import dash_bootstrap_components as dbc
app = dash.Dash[
external_stylesheets=[dbc.themes.BOOTSTRAP]
]
app.layout = dbc.Alert[
"Hello, Bootstrap!", className="m-5"
]
if __name__ == "__main__":
app.run_server[]
6and
$ python app.py
...Running on //127.0.0.1:8050/ [Press CTRL+C to quit]
2components with the $ python app.py
...Running on //127.0.0.1:8050/ [Press CTRL+C to quit]
3 property.html.H1['Hello Dash', style={'textAlign': 'center', 'color': '#7FDBFF'}]
Nội phân chính
# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd
app = Dash[__name__]
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
html.Div[children='''
Dash: A web application framework for your data.
'''],
dcc.Graph[
id='example-graph',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
0.Thanh bên đơn giản
and the HTML attributes:
- Iris
you can just supply a dictionary. - Tương tác phân cụm bộ dữ liệu IRIS. Dựa trên ví dụ RSHiny này.
So, instead of
8, it’s$ python app.py ...Running on //127.0.0.1:8050/ [Press CTRL+C to quit]
9.$ python app.py ...Running on //127.0.0.1:8050/ [Press CTRL+C to quit]
- Một ứng dụng ví dụ cho thấy cách đảm bảo các thành phần
1 có kích thước chính xác khi được sử dụng vớiimport dash import dash_bootstrap_components as dbc app = dash.Dash[ external_stylesheets=[dbc.themes.BOOTSTRAP] ] app.layout = dbc.Alert[ "Hello, Bootstrap!", className="m-5" ] if __name__ == "__main__": app.run_server[]
2.import dash import dash_bootstrap_components as dbc app = dash.Dash[ external_stylesheets=[dbc.themes.BOOTSTRAP] ] app.layout = dbc.Alert[ "Hello, Bootstrap!", className="m-5" ] if __name__ == "__main__": app.run_server[]
- Trẻ em của thẻ HTML được chỉ định thông qua đối số từ khóa
2. Theo quy ước, đây luôn là đối số đầu tiên và vì vậy nó thường bị bỏ qua.# Run this app with `python app.py` and # visit //127.0.0.1:8050/ in your web browser. from dash import Dash, html, dcc import plotly.express as px import pandas as pd app = Dash[__name__] # assume you have a "long-form" data frame # see //plotly.com/python/px-arguments/ for more options df = pd.DataFrame[{ "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"], "Amount": [4, 1, 2, 2, 4, 5], "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"] }] fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"] app.layout = html.Div[children=[ html.H1[children='Hello Dash'], html.Div[children=''' Dash: A web application framework for your data. '''], dcc.Graph[ id='example-graph', figure=fig ] ]] if __name__ == '__main__': app.run_server[debug=True]
argument. By convention, this is always the first argument and so it is often omitted.
Bên cạnh đó, tất cả các thuộc tính và thẻ HTML có sẵn đều có sẵn cho bạn trong bối cảnh Python của bạn.
to you within your Python context.
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 trong Python, chúng tôi có thể tạo các thành phần có thể tái sử dụng phức tạp như các bảng mà không cần chuyển đổi ngữ cảnh hoặc ngôn ngữ.
Ở đây, một ví dụ nhanh chóng tạo ra
# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
app = Dash[__name__]
colors = {
'background': '#111111',
'text': '#7FDBFF'
}
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
fig.update_layout[
plot_bgcolor=colors['background'],
paper_bgcolor=colors['background'],
font_color=colors['text']
]
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 your data.', style={
'textAlign': 'center',
'color': colors['text']
}],
dcc.Graph[
id='example-graph-2',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
3 từ khung dữ liệu gấu trúc. Tạo một tệp có tên $ python app.py
...Running on //127.0.0.1:8050/ [Press CTRL+C to quit]
0 với mã sau:Pandas dataframe. Create a file named
$ python app.py
...Running on //127.0.0.1:8050/ [Press CTRL+C to quit]
0 with the
following code:# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, 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[[
html.Thead[
html.Tr[[html.Th[col] for col in dataframe.columns]]
],
html.Tbody[[
html.Tr[[
html.Td[dataframe.iloc[i][col]] for col in dataframe.columns
]] for i in range[min[len[dataframe], max_rows]]
]]
]]
app = Dash[__name__]
app.layout = html.Div[[
html.H4[children='US Agriculture Exports [2011]'],
generate_table[df]
]]
if __name__ == '__main__':
app.run_server[debug=True]
Xuất khẩu nông nghiệp Hoa Kỳ [2011]
Alabama | 1390.63 | 34.4 | 10.6 | 481.0 | 4.06 | 8.0 | 17.1 | 25.11 | 5.5 | 8.9 | 14.33 | 34.9 | 70.0 | 317.61 | |
1 | Alaska | 13.31 | 0.2 | 0.1 | 0.19 | 0.6 | 1.0 | 1.56 | |||||||
2 | Arizona | 1463.17 | 71.3 | 17.9 | 105.48 | 19.3 | 41.0 | 60.27 | 147.5 | 239.4 | 386.91 | 7.3 | 48.7 | 423.95 | |
3 | Arkansas | 3586.02 | 53.2 | 29.4 | 562.9 | 3.53 | 2.2 | 4.7 | 6.88 | 4.4 | 7.1 | 11.45 | 69.5 | 114.5 | 665.44 |
4 | California | 16472.88 | 228.7 | 11.1 | 225.4 | 929.95 | 2791.8 | 5944.6 | 8736.4 | 803.2 | 1303.5 | 2106.79 | 34.6 | 249.3 | 1064.95 |
5 | Colorado | 1851.33 | 261.4 | 66.0 | 14.0 | 71.94 | 5.7 | 12.2 | 17.99 | 45.1 | 73.2 | 118.27 | 183.2 | 400.5 | |
6 | Connecticut | 259.62 | 1.1 | 0.1 | 6.9 | 9.49 | 4.2 | 8.9 | 13.1 | 4.3 | 6.9 | 11.16 | |||
7 | Del biết | 282.19 | 0.4 | 0.6 | 114.7 | 2.3 | 0.5 | 1.0 | 1.53 | 7.6 | 12.4 | 20.03 | 26.9 | 22.9 | |
8 | Florida | 3764.09 | 42.6 | 0.9 | 56.9 | 66.31 | 438.2 | 933.1 | 1371.36 | 171.9 | 279.0 | 450.86 | 3.5 | 1.8 | 78.24 |
9 | Georgia | 2860.84 | 31.0 | 18.9 | 630.4 | 38.38 | 74.6 | 158.9 | 233.51 | 59.0 | 95.8 | 154.77 | 57.8 | 65.4 | 1154.07 |
Thêm về trực quan
Mô -đun thành phần lõi Dash [
# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd
app = Dash[__name__]
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
html.Div[children='''
Dash: A web application framework for your data.
'''],
dcc.Graph[
id='example-graph',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
1] bao gồm một thành phần gọi là # Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
app = Dash[__name__]
colors = {
'background': '#111111',
'text': '#7FDBFF'
}
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
fig.update_layout[
plot_bgcolor=colors['background'],
paper_bgcolor=colors['background'],
font_color=colors['text']
]
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 your data.', style={
'textAlign': 'center',
'color': colors['text']
}],
dcc.Graph[
id='example-graph-2',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
6.module [
# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd
app = Dash[__name__]
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
html.Div[children='''
Dash: A web application framework for your data.
'''],
dcc.Graph[
id='example-graph',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
1] includes a component called# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
app = Dash[__name__]
colors = {
'background': '#111111',
'text': '#7FDBFF'
}
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
fig.update_layout[
plot_bgcolor=colors['background'],
paper_bgcolor=colors['background'],
font_color=colors['text']
]
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 your data.', style={
'textAlign': 'center',
'color': colors['text']
}],
dcc.Graph[
id='example-graph-2',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
6.# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
app = Dash[__name__]
colors = {
'background': '#111111',
'text': '#7FDBFF'
}
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
fig.update_layout[
plot_bgcolor=colors['background'],
paper_bgcolor=colors['background'],
font_color=colors['text']
]
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 your data.', style={
'textAlign': 'center',
'color': colors['text']
}],
dcc.Graph[
id='example-graph-2',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
6 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 đồ thị JavaScript nguồn mở. Plotly.js hỗ trợ hơn 35 loại biểu đồ và hiển thị biểu đồ trong cả SVG chất lượng vector và WebGL hiệu suất cao.renders interactive data visualizations using the open source
plotly.js JavaScript graphing
library. Plotly.js supports over 35 chart types and renders charts in
both vector-quality SVG and high-performance WebGL.
Đối số
# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
app = Dash[__name__]
colors = {
'background': '#111111',
'text': '#7FDBFF'
}
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
fig.update_layout[
plot_bgcolor=colors['background'],
paper_bgcolor=colors['background'],
font_color=colors['text']
]
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 your data.', style={
'textAlign': 'center',
'color': colors['text']
}],
dcc.Graph[
id='example-graph-2',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
8 trong thành phần # Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
app = Dash[__name__]
colors = {
'background': '#111111',
'text': '#7FDBFF'
}
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
fig.update_layout[
plot_bgcolor=colors['background'],
paper_bgcolor=colors['background'],
font_color=colors['text']
]
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 your data.', style={
'textAlign': 'center',
'color': colors['text']
}],
dcc.Graph[
id='example-graph-2',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
6 là đối số # Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
app = Dash[__name__]
colors = {
'background': '#111111',
'text': '#7FDBFF'
}
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
fig.update_layout[
plot_bgcolor=colors['background'],
paper_bgcolor=colors['background'],
font_color=colors['text']
]
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 your data.', style={
'textAlign': 'center',
'color': colors['text']
}],
dcc.Graph[
id='example-graph-2',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
8 giống nhau được sử dụng bởi html.H1['Hello Dash', style={'textAlign': 'center', 'color': '#7FDBFF'}]
1, thư viện đồ thị Python nguồn mở Plotly. Kiểm tra tài liệu và thư viện Plotly.py để tìm hiểu thêm.component is the same
# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
app = Dash[__name__]
colors = {
'background': '#111111',
'text': '#7FDBFF'
}
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
fig.update_layout[
plot_bgcolor=colors['background'],
paper_bgcolor=colors['background'],
font_color=colors['text']
]
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 your data.', style={
'textAlign': 'center',
'color': colors['text']
}],
dcc.Graph[
id='example-graph-2',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
8
argument that is used by html.H1['Hello Dash', style={'textAlign': 'center', 'color': '#7FDBFF'}]
1, Plotly’sopen source Python graphing library.
Check out the plotly.py documentation and gallery
to learn more.
Dưới đây, một ví dụ tạo ra một âm mưu phân tán từ khung dữ liệu gấu trúc. Tạo một tệp có tên
$ python app.py
...Running on //127.0.0.1:8050/ [Press CTRL+C to quit]
0 với mã sau:Pandas dataframe. Create a file named
$ python app.py
...Running on //127.0.0.1:8050/ [Press CTRL+C to quit]
0 with the following code:# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//gist.githubusercontent.com/chriddyp/5d1ea79569ed194d432e56108a04d188/raw/a9f9e8076b837d541398e999dcbac2b2826a81f8/gdp-life-exp-2007.csv']
fig = px.scatter[df, x="gdp per capita", y="life expectancy",
size="population", color="continent", hover_name="country",
log_x=True, size_max=60]
app.layout = html.Div[[
dcc.Graph[
id='life-exp-vs-gdp',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
Các biểu đồ này là tương tác và phản hồi. Nhìn qua các điểm để xem các giá trị của chúng, nhấp vào các mục huyền thoại để chuyển đổi dấu vết, nhấp và kéo để phóng to, giữ Shift và nhấp và kéo đến Pan.
Hover over points to see their values,
click on legend items to toggle traces,
click and drag to zoom,
hold down shift, and click and
drag to pan.
Đánh dấu
Mặc dù Dash phơi bày HTML thông qua các thành phần HTML DASH [
import dash
import dash_bootstrap_components as dbc
app = dash.Dash[
external_stylesheets=[dbc.themes.BOOTSTRAP]
]
app.layout = dbc.Alert[
"Hello, Bootstrap!", className="m-5"
]
if __name__ == "__main__":
app.run_server[]
8], nhưng có thể tẻ nhạt khi viết bản sao của bạn trong HTML. Để viết các khối văn bản, bạn có thể sử dụng thành phần html.H1['Hello Dash', style={'textAlign': 'center', 'color': '#7FDBFF'}]
4 trong các thành phần lõi Dash [# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd
app = Dash[__name__]
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
html.Div[children='''
Dash: A web application framework for your data.
'''],
dcc.Graph[
id='example-graph',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
1]. Tạo một tệp có tên $ python app.py
...Running on //127.0.0.1:8050/ [Press CTRL+C to quit]
0 với mã sau:html.H1['Hello Dash', style={'textAlign': 'center', 'color': '#7FDBFF'}]
4 component inDash Core Components [
# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd
app = Dash[__name__]
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
html.Div[children='''
Dash: A web application framework for your data.
'''],
dcc.Graph[
id='example-graph',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
1]. Create a file named $ python app.py
...Running on //127.0.0.1:8050/ [Press CTRL+C to quit]
0 with the following code:# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, html, dcc
app = Dash[__name__]
markdown_text = '''
### Dash and Markdown
Dash apps can be written in Markdown.
Dash uses the [CommonMark][//commonmark.org/]
specification of Markdown.
Check out their [60 Second Markdown Tutorial][//commonmark.org/help/]
if this is your first introduction to Markdown!
'''
app.layout = html.Div[[
dcc.Markdown[children=markdown_text]
]]
if __name__ == '__main__':
app.run_server[debug=True]
Dash và Markdown
Ứng dụng Dash có thể được viết bằng Markdown. Dash sử dụng đặc tả Commonmark của Markdown. Kiểm tra hướng dẫn đánh dấu 60 giây của họ nếu đây là phần giới thiệu đầu tiên của bạn về Markdown!
Dash uses the CommonMark
specification of Markdown.
Check out their 60 Second
Markdown Tutorial
if this is your first introduction to Markdown!
Thành phần cốt lõi
Các thành phần lõi Dash [
# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd
app = Dash[__name__]
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
html.Div[children='''
Dash: A web application framework for your data.
'''],
dcc.Graph[
id='example-graph',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
1] bao gồm một tập hợp các thành phần cấp cao hơn như thả xuống, đồ thị, khối đánh dấu, v.v.includes a set of higher-level components like dropdowns, graphs, markdown blocks, and more.
Giống như tất cả các thành phần Dash, chúng được mô tả hoàn toàn 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.
Every option that is configurable is available as a keyword argument
of the component.
Chúng tôi sẽ thấy nhiều thành phần này trong suốt hướng dẫn. Bạn có thể xem tất cả các thành phần có sẵn trong bộ sưu tập các thành phần cốt lõi Dash.
You can
view all of the available components in the
Dash Core Components Gallery.
Dưới đây là một vài thành phần có sẵn. Tạo một tệp có tên
$ python app.py
...Running on //127.0.0.1:8050/ [Press CTRL+C to quit]
0 với mã sau:Create a file named
$ python app.py
...Running on //127.0.0.1:8050/ [Press CTRL+C to quit]
0 with the following code:# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, html, dcc
app = Dash[__name__]
app.layout = html.Div[[
html.Div[children=[
html.Label['Dropdown'],
dcc.Dropdown[['New York City', 'Montréal', 'San Francisco'], 'Montréal'],
html.Br[],
html.Label['Multi-Select Dropdown'],
dcc.Dropdown[['New York City', 'Montréal', 'San Francisco'],
['Montréal', 'San Francisco'],
multi=True],
html.Br[],
html.Label['Radio Items'],
dcc.RadioItems[['New York City', 'Montréal', 'San Francisco'], 'Montréal'],
], style={'padding': 10, 'flex': 1}],
html.Div[children=[
html.Label['Checkboxes'],
dcc.Checklist[['New York City', 'Montréal', 'San Francisco'],
['Montréal', 'San Francisco']
],
html.Br[],
html.Label['Text Input'],
dcc.Input[value='MTL', type='text'],
html.Br[],
html.Label['Slider'],
dcc.Slider[
min=0,
max=9,
marks={i: f'Label {i}' if i == 1 else str[i] for i in range[1, 6]},
value=5,
],
], style={'padding': 10, 'flex': 1}]
], style={'display': 'flex', 'flex-direction': 'row'}]
if __name__ == '__main__':
app.run_server[debug=True]
Thả xuống
Thả xuống đa lựa chọn
Các mặt hàng radio
Hộp kiểm
Đầu vào văn bản
Thanh trượt
Cứu giúp
Các thành phần Dash được 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 quá trình khởi tạo làm đối số từ khóa.
components is set during instantiation as a keyword argument.
Gọi
html.H1['Hello Dash', style={'textAlign': 'center', 'color': '#7FDBFF'}]
9 trong bảng điều khiển Python của bạn 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ó.learn more about a component and its available arguments.
import dash
import dash_bootstrap_components as dbc
app = dash.Dash[
external_stylesheets=[dbc.themes.BOOTSTRAP]
]
app.layout = dbc.Alert[
"Hello, Bootstrap!", className="m-5"
]
if __name__ == "__main__":
app.run_server[]
0Bản tóm tắt
import dash
import dash_bootstrap_components as dbc
app = dash.Dash[
external_stylesheets=[dbc.themes.BOOTSTRAP]
]
app.layout = dbc.Alert[
"Hello, Bootstrap!", className="m-5"
]
if __name__ == "__main__":
app.run_server[]
5 của một ứng dụng Dash mô tả ứng dụng này trông như thế nào. import dash
import dash_bootstrap_components as dbc
app = dash.Dash[
external_stylesheets=[dbc.themes.BOOTSTRAP]
]
app.layout = dbc.Alert[
"Hello, Bootstrap!", className="m-5"
]
if __name__ == "__main__":
app.run_server[]
5 là một cây các thành phần phân cấp.The
import dash
import dash_bootstrap_components as dbc
app = dash.Dash[
external_stylesheets=[dbc.themes.BOOTSTRAP]
]
app.layout = dbc.Alert[
"Hello, Bootstrap!", className="m-5"
]
if __name__ == "__main__":
app.run_server[]
5 is a hierarchical tree of components.Các thành phần HTML Dash [
import dash
import dash_bootstrap_components as dbc
app = dash.Dash[
external_stylesheets=[dbc.themes.BOOTSTRAP]
]
app.layout = dbc.Alert[
"Hello, Bootstrap!", className="m-5"
]
if __name__ == "__main__":
app.run_server[]
8] cung cấp các lớp cho tất cả các thẻ HTML và các đối số từ khóa mô tả các thuộc tính HTML như $ python app.py
...Running on //127.0.0.1:8050/ [Press CTRL+C to quit]
3, # Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
app = Dash[__name__]
colors = {
'background': '#111111',
'text': '#7FDBFF'
}
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
fig.update_layout[
plot_bgcolor=colors['background'],
paper_bgcolor=colors['background'],
font_color=colors['text']
]
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 your data.', style={
'textAlign': 'center',
'color': colors['text']
}],
dcc.Graph[
id='example-graph-2',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
0 và # Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, 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[[
html.Thead[
html.Tr[[html.Th[col] for col in dataframe.columns]]
],
html.Tbody[[
html.Tr[[
html.Td[dataframe.iloc[i][col]] for col in dataframe.columns
]] for i in range[min[len[dataframe], max_rows]]
]]
]]
app = Dash[__name__]
app.layout = html.Div[[
html.H4[children='US Agriculture Exports [2011]'],
generate_table[df]
]]
if __name__ == '__main__':
app.run_server[debug=True]
5. Các thành phần lõi Dash [# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd
app = Dash[__name__]
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
html.Div[children='''
Dash: A web application framework for your data.
'''],
dcc.Graph[
id='example-graph',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
1] tạo ra các thành phần cấp cao hơn như điều khiển và đồ thị.tags and the keyword arguments describe the HTML attributes like
$ python app.py
...Running on //127.0.0.1:8050/ [Press CTRL+C to quit]
3, # Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
app = Dash[__name__]
colors = {
'background': '#111111',
'text': '#7FDBFF'
}
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
fig.update_layout[
plot_bgcolor=colors['background'],
paper_bgcolor=colors['background'],
font_color=colors['text']
]
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 your data.', style={
'textAlign': 'center',
'color': colors['text']
}],
dcc.Graph[
id='example-graph-2',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
0, and # Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, 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[[
html.Thead[
html.Tr[[html.Th[col] for col in dataframe.columns]]
],
html.Tbody[[
html.Tr[[
html.Td[dataframe.iloc[i][col]] for col in dataframe.columns
]] for i in range[min[len[dataframe], max_rows]]
]]
]]
app = Dash[__name__]
app.layout = html.Div[[
html.H4[children='US Agriculture Exports [2011]'],
generate_table[df]
]]
if __name__ == '__main__':
app.run_server[debug=True]
5. Dash Core Components [# Run this app with `python app.py` and
# visit //127.0.0.1:8050/ in your web browser.
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd
app = Dash[__name__]
# assume you have a "long-form" data frame
# see //plotly.com/python/px-arguments/ for more options
df = pd.DataFrame[{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}]
fig = px.bar[df, x="Fruit", y="Amount", color="City", barmode="group"]
app.layout = html.Div[children=[
html.H1[children='Hello Dash'],
html.Div[children='''
Dash: A web application framework for your data.
'''],
dcc.Graph[
id='example-graph',
figure=fig
]
]]
if __name__ == '__main__':
app.run_server[debug=True]
1] generates higher-level components like
controls and graphs.Để tham khảo, xem:
- Bộ sưu tập thành phần cốt lõi Dash
- Bộ sưu tập linh kiện HTML Dash
Phần tiếp theo của hướng dẫn Dash bao gồm cách làm cho các ứng dụng này tương tác. Hướng dẫn Dash Phần 3: Gọi lại cơ bản
Dash Tutorial Part 3: Basic Callbacks