Python Dash是一個基於Flask和React的開源框架，可幫助開發人員使用Python快速構建互動式Web應用程式，無需編寫大量的JavaScript程式碼。
安裝
pip install dash
Hello World
讓我們從一個簡單的"Hello World"範例開始，以了解Dash的基本結構。在下面的程式碼中，我們建立了一個Dash套用，其中包含一個標題和一段文字：
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
html.H1('Welcome to Python Dash'),
html.P('This is a basic example of a Dash app.')
])
if __name__ == '__main__':
app.run_server(debug=True)
控制項互動
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
app = dash.Dash(__name__)
app.layout = html.Div([
html.H1('Interactive Controls'),
html.Div([
html.Label('Dropdown'),
dcc.Dropdown(
options=[
{'label': 'Option 1', 'value': 'option1'},
{'label': 'Option 2', 'value': 'option2'},
{'label': 'Option 3', 'value': 'option3'}
],
value='option1',
id='dropdown'
)
]),
html.Div([
html.Label('Slider'),
dcc.Slider(
min=1,
max=10,
step=1,
value=5,
id='slider'
),
html.Div(id='slider-output')
]),
html.Div([
html.Label('Radio Items'),
dcc.RadioItems(
options=[
{'label': 'Option 1', 'value': 'option1'},
{'label': 'Option 2', 'value': 'option2'},
{'label': 'Option 3', 'value': 'option3'}
],
value='option1',
id='radio-items'
)
]),
html.Div([
html.Label('Checkboxes'),
dcc.Checklist(
options=[
{'label': 'Option 1', 'value': 'option1'},
{'label': 'Option 2', 'value': 'option2'},
{'label': 'Option 3', 'value': 'option3'}
],
value=['option1', 'option2'],
id='checkboxes'
)
]),
html.Div([
html.Label('Input Text'),
dcc.Input(
type='text',
value='',
id='input-text'
),
html.Div(id='input-text-output')
]),
html.Div([
html.Label('Date Picker'),
dcc.DatePickerSingle(
date='2024-05-26',
id='date-picker'
)
]),
html.Div([
html.Label('Range Slider'),
dcc.RangeSlider(
min=0,
max=100,
step=10,
value=[20, 80],
id='range-slider'
),
html.Div(id='range-slider-output')
]),
html.Div([
html.Label('Textarea'),
dcc.Textarea(
value='',
id='textarea',
style={'width': '100%'}
),
html.Div(id='textarea-output')
]),
html.Div([
html.Label('Upload File'),
dcc.Upload(
id='upload-file',
children=html.Button('Select File')
),
html.Div(id='upload-output')
]),
])
@app.callback(
Output('slider-output', 'children'),
[Input('slider', 'value')]
)
defupdate_slider_output(value):
returnf'Slider Value: {value}'
@app.callback(
Output('input-text-output', 'children'),
[Input('input-text', 'value')]
)
defupdate_input_text_output(value):
returnf'Input Text: {value}'
@app.callback(
Output('range-slider-output', 'children'),
[Input('range-slider', 'value')]
)
defupdate_range_slider_output(value):
returnf'Range Slider Values: {value}'
@app.callback(
Output('textarea-output', 'children'),
[Input('textarea', 'value')]
)
defupdate_textarea_output(value):
returnf'Textarea Value: {value}'
@app.callback(
Output('upload-output', 'children'),
[Input('upload-file', 'filename')]
)
defupdate_upload_output(filename):
if filename:
returnf'Uploaded File: {filename}'
else:
return'No file uploaded.'
if __name__ == '__main__':
app.run_server(debug=True)
