Hướng dẫn dash bootstrap dropdown - dash bootstrap thả xuống

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 dung chính

• Dash và Markdown
• Đồ 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
• Có thể tùy chỉnh cao
• Xin chào Dash
• 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
• Dash và Markdown
• Đồ 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

• Đồ 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
• Thực hiện thay đổi đầu tiên của bạn
• Thêm về các thành phần HTML

Có thể tùy chỉnh cao

• Đồ 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
• Thực hiện thay đổi đầu tiên của bạn
• Thêm về các thành phần HTML

Dash và Markdown

Đồ thị trong các tab

Đồ thị trong các tab

Bắt đầu nhanh chóng

Thư viện thành phần mở rộng

---

Bắt đầu nhanh chó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

Các thành phần có thể tái sử dụng

Thêm về trực quan

---

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

---

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

Thực hiện thay đổi đầu tiên của bạn

# Run this app with `python app.py` and
# visit http://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 https://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 http://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:

1. Các thành phần có thể tái sử dụng
   

   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()

   6
   and

   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()

   7.

2. Thêm về các thành phần HTML

   Các thành phần có thể tái sử dụng
   The

   Thêm về trực quan
   component generates a

   # Run this app with `python app.py` and
   # visit http://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 https://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 HTML element in your application.
   3. Not all components are pure HTML.
   The Dash Core Components module (

   # Run this app with `python app.py` and
   # visit http://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 https://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)
   contains higher-level components that are interactive and are generated with
   JavaScript, HTML, and CSS through the React.js library.

3. Đánh dấu
   Dash is declarative: you will primarily describe your application
   through these attributes.

4. Bắt đầu nhanh chóng
5. Thư viện thành phần mở rộng
   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

Các thành phần có thể tái sử dụng
This means that Dash
will automatically refresh your browser when you make a change in your code.

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

Đánh dấu

Xin chào Dash

Dash và Markdown

Đồ thị trong các tab

Bắt đầu nhanh chóng
and

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

2components with the

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

3 property.

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()

9

Bắt đầu nhanh chóng

Thư viện thành phần mở rộng

Có thể tùy chỉnh cao
and the HTML attributes:

1. Xin chào Dash
   you can just supply a dictionary.
2. Thực hiện thay đổi đầu tiên của bạn
   So, instead of

   $ python app.py
   ...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)
   

   8, it’s

   $ python app.py
   ...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)
   

   9.
3. Thêm về các thành phần HTML
4. Các thành phần có thể tái sử dụng
   argument. By convention, this is always the first argument and so it is often omitted.

Thêm về trực quan
to you within your Python context.

---

Thực hiện thay đổi đầu tiên của bạn

Thêm về các thành phần HTML

Ở đây, một ví dụ nhanh chóng tạo ra

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()

53 từ khung dữ liệu gấu trúc. Tạo một tệp có tên

$ python app.py
...Running on http://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 http://127.0.0.1:8050/ (Press CTRL+C to quit)

0 with the following code:

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()

9
Pandas dataframe. Create a file named

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

0 with the following code:

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()

9

Xuất khẩu nông nghiệp Hoa Kỳ (2011)

Không tên: 0	tiểu bang	Tổng xuất khẩu	thịt bò	thịt lợn	gia cầm	sản phẩm bơ sữa	Trái cây tươi	Trái cây Proc	Tổng số trái cây	rau tươi	Rau Proc	Tổng số rau	Ngô	lúa mì	bông
	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 http://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 https://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à

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()

56. module (

# Run this app with `python app.py` and
# visit http://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 https://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

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()

56.

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()

56 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.
module (

# Run this app with `python app.py` and
# visit http://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 https://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

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()

56.

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()

56 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ố

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()

58 trong thành phần

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()

56 là đối số

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()

58 giống nhau được sử dụng bở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()

91, 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

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()

58 argument that is used by

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()

91, Plotly’s open source Python graphing library. Check out the plotly.py documentation and gallery to learn more.
component is the same

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()

58 argument that is used by

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()

91, Plotly’s
open 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 http://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 http://127.0.0.1:8050/ (Press CTRL+C to quit)

0 with the following code:

# Run this app with `python app.py` and
# visit http://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 https://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
Pandas dataframe. Create a file named

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

0 with the following code:

# Run this app with `python app.py` and
# visit http://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 https://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

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

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()

94 trong các thành phần lõi Dash (

# Run this app with `python app.py` and
# visit http://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 https://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 http://127.0.0.1:8050/ (Press CTRL+C to quit)

0 với mã sau:

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()

94 component in Dash Core Components (

# Run this app with `python app.py` and
# visit http://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 https://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 http://127.0.0.1:8050/ (Press CTRL+C to quit)

0 with the following code:

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

1

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()

94 component in
Dash Core Components (

# Run this app with `python app.py` and
# visit http://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 https://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 http://127.0.0.1:8050/ (Press CTRL+C to quit)

0 with the following code:

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

1

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!
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 http://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 https://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.
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.
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.
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 http://127.0.0.1:8050/ (Press CTRL+C to quit)

0 với mã sau: Create a file named

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

0 with the following code:

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

5
Create a file named

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

0 with the following code:

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

5

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.
components is set during instantiation as a keyword argument.

Gọ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()

99 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()

0
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()

0

Bả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.
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 http://127.0.0.1:8050/ (Press CTRL+C to quit)

3,

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()

50 và

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()

95. Các thành phần lõi Dash (

# Run this app with `python app.py` and
# visit http://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 https://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 http://127.0.0.1:8050/ (Press CTRL+C to quit)

3,

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()

50, and

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()

95. Dash Core Components (

# Run this app with `python app.py` and
# visit http://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 https://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.
tags and the keyword arguments describe the HTML attributes like

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

3,

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()

50, and

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()

95. Dash Core Components (

# Run this app with `python app.py` and
# visit http://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 https://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
Dash Tutorial Part 3: Basic Callbacks