Chương này mô tả cách tạo các ứng dụng Dash của bạn bằng các chức năng gọi lại. các hàm được Dash tự động gọi bất cứ khi nào thuộc tính của thành phần đầu vào thay đổi, để cập nhật một số thuộc tính trong thành phần khác [đầu ra]
Để có hiệu suất tải biểu đồ và tương tác người dùng tối ưu,
Các ứng dụng Dash nên xem xét Hàng đợi công việc,
HPC, Datashader,
and horizontal scaling capabilities of Dash Enterprise.
Hãy bắt đầu với một ví dụ đơn giản về ứng dụng Dash tương tác
Ứng dụng Dash tương tác đơn giản
Nếu bạn đang sử dụng Không gian làm việc khoa học dữ liệu của Dash Enterprise,
sao chép và dán mã bên dưới vào Không gian làm việc của bạn [xem video].Tìm hiểu xem công ty của bạn có đang sử dụng Dash Enterprise không
from dash import Dash, dcc, html, Input, Output
app = Dash[__name__]
app.layout = html.Div[[
html.H6["Change the value in the text box to see callbacks in action!"],
html.Div[[
"Input: ",
dcc.Input[id='my-input', value='initial value', type='text']
]],
html.Br[],
html.Div[id='my-output'],
]]
@app.callback[
Output[component_id='my-output', component_property='children'],
Input[component_id='my-input', component_property='value']
]
def update_output_div[input_value]:
return f'Output: {input_value}'
if __name__ == '__main__':
app.run_server[debug=True]
Thay đổi giá trị trong hộp văn bản để xem hoạt động của lệnh gọi lại
Hãy chia nhỏ ví dụ này
- "Đầu vào" và "đầu ra" của ứng dụng của chúng tôi được mô tả
như các đối số của trình trang trí
7.from dash import Dash, dcc, html, Input, Output import plotly.express as px import pandas as pd df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'] app = Dash[__name__] app.layout = html.Div[[ dcc.Graph[id='graph-with-slider'], dcc.Slider[ df['year'].min[], df['year'].max[], step=None, value=df['year'].min[], marks={str[year]: str[year] for year in df['year'].unique[]}, id='year-slider' ] ]] @app.callback[ Output['graph-with-slider', 'figure'], Input['year-slider', 'value']] def update_figure[selected_year]: filtered_df = df[df.year == selected_year] fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp", size="pop", color="continent", hover_name="country", log_x=True, size_max=55] fig.update_layout[transition_duration=500] return fig if __name__ == '__main__': app.run_server[debug=True]
Tìm hiểu thêm về cách sử dụng trình trang trí
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
7a. Bằng cách viết trình trang trí này, chúng tôi yêu cầu Dash gọi hàm này cho chúng tôi bất cứ khi nào giá trị của thành phần “đầu vào” [hộp văn bản] thay đổi để cập nhật phần con của thành phần “đầu ra” trên trang [div HTML
b. Bạn có thể sử dụng bất kỳ tên nào cho chức năng được bao bọc bởi trình trang trí
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
7. Quy ước là tên mô tả [các] đầu ra gọi lạic. Bạn có thể sử dụng bất kỳ tên nào cho các đối số của hàm, nhưng bạn phải sử dụng cùng tên bên trong hàm gọi lại giống như cách bạn thực hiện trong định nghĩa của nó, giống như trong một hàm Python thông thường. Các đối số là vị trí theo mặc định. đầu tiên các mục
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
0 và sau đó bất kỳ mục from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
1 nào được đưa ra theo thứ tự như trong trang trí. Bạn cũng có tùy chọn sử dụng các đối số từ khóa được đặt tên, thay vì vị trí. Xem chương Chữ ký gọi lại linh hoạt để biết thêm thông tind. Bạn phải sử dụng cùng một
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
5 mà bạn đã cung cấp một thành phần Dấu gạch ngang trong from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
1 khi đề cập đến nó như một đầu vào hoặc đầu ra của trình trang trí from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
7e. Trình trang trí
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
7 cần ở ngay phía trên khai báo hàm gọi lại. Nếu có một dòng trống giữa trình trang trí và định nghĩa chức năng, đăng ký gọi lại sẽ không thành côngf. Nếu bạn tò mò về ý nghĩa của cú pháp trình trang trí bên dưới mui xe, bạn có thể đọc câu trả lời StackOverflow này và tìm hiểu thêm về trình trang trí bằng cách đọc PEP 318 – Trình trang trí cho Hàm và Phương thức
- Trong Dash, đầu vào và đầu ra của ứng dụng của chúng ta chỉ đơn giản là
thuộc tính của một thành phần cụ thể. Trong ví dụ này,
đầu vào của chúng ta là thuộc tính “
6” của thành phần có IDfrom dash import Dash, dcc, html, Input, Output import plotly.express as px import pandas as pd app = Dash[__name__] df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv'] app.layout = html.Div[[ html.Div[[ html.Div[[ dcc.Dropdown[ df['Indicator Name'].unique[], 'Fertility rate, total [births per woman]', id='xaxis-column' ], dcc.RadioItems[ ['Linear', 'Log'], 'Linear', id='xaxis-type', inline=True ] ], style={'width': '48%', 'display': 'inline-block'}], html.Div[[ dcc.Dropdown[ df['Indicator Name'].unique[], 'Life expectancy at birth, total [years]', id='yaxis-column' ], dcc.RadioItems[ ['Linear', 'Log'], 'Linear', id='yaxis-type', inline=True ] ], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}] ]], dcc.Graph[id='indicator-graphic'], dcc.Slider[ df['Year'].min[], df['Year'].max[], step=None, id='year--slider', value=df['Year'].max[], marks={str[year]: str[year] for year in df['Year'].unique[]}, ] ]] @app.callback[ Output['indicator-graphic', 'figure'], Input['xaxis-column', 'value'], Input['yaxis-column', 'value'], Input['xaxis-type', 'value'], Input['yaxis-type', 'value'], Input['year--slider', 'value']] def update_graph[xaxis_column_name, yaxis_column_name, xaxis_type, yaxis_type, year_value]: dff = df[df['Year'] == year_value] fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'], y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'], hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']] fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest'] fig.update_xaxes[title=xaxis_column_name, type='linear' if xaxis_type == 'Linear' else 'log'] fig.update_yaxes[title=yaxis_column_name, type='linear' if yaxis_type == 'Linear' else 'log'] return fig if __name__ == '__main__': app.run_server[debug=True]
“
7”. Đầu ra của chúng ta là thuộc tính “from dash import Dash, dcc, html, Input, Output import plotly.express as px import pandas as pd app = Dash[__name__] df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv'] app.layout = html.Div[[ html.Div[[ html.Div[[ dcc.Dropdown[ df['Indicator Name'].unique[], 'Fertility rate, total [births per woman]', id='xaxis-column' ], dcc.RadioItems[ ['Linear', 'Log'], 'Linear', id='xaxis-type', inline=True ] ], style={'width': '48%', 'display': 'inline-block'}], html.Div[[ dcc.Dropdown[ df['Indicator Name'].unique[], 'Life expectancy at birth, total [years]', id='yaxis-column' ], dcc.RadioItems[ ['Linear', 'Log'], 'Linear', id='yaxis-type', inline=True ] ], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}] ]], dcc.Graph[id='indicator-graphic'], dcc.Slider[ df['Year'].min[], df['Year'].max[], step=None, id='year--slider', value=df['Year'].max[], marks={str[year]: str[year] for year in df['Year'].unique[]}, ] ]] @app.callback[ Output['indicator-graphic', 'figure'], Input['xaxis-column', 'value'], Input['yaxis-column', 'value'], Input['xaxis-type', 'value'], Input['yaxis-type', 'value'], Input['year--slider', 'value']] def update_graph[xaxis_column_name, yaxis_column_name, xaxis_type, yaxis_type, year_value]: dff = df[df['Year'] == year_value] fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'], y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'], hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']] fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest'] fig.update_xaxes[title=xaxis_column_name, type='linear' if xaxis_type == 'Linear' else 'log'] fig.update_yaxes[title=yaxis_column_name, type='linear' if yaxis_type == 'Linear' else 'log'] return fig if __name__ == '__main__': app.run_server[debug=True]
8” củafrom dash import Dash, dcc, html, Input, Output import plotly.express as px import pandas as pd app = Dash[__name__] df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv'] app.layout = html.Div[[ html.Div[[ html.Div[[ dcc.Dropdown[ df['Indicator Name'].unique[], 'Fertility rate, total [births per woman]', id='xaxis-column' ], dcc.RadioItems[ ['Linear', 'Log'], 'Linear', id='xaxis-type', inline=True ] ], style={'width': '48%', 'display': 'inline-block'}], html.Div[[ dcc.Dropdown[ df['Indicator Name'].unique[], 'Life expectancy at birth, total [years]', id='yaxis-column' ], dcc.RadioItems[ ['Linear', 'Log'], 'Linear', id='yaxis-type', inline=True ] ], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}] ]], dcc.Graph[id='indicator-graphic'], dcc.Slider[ df['Year'].min[], df['Year'].max[], step=None, id='year--slider', value=df['Year'].max[], marks={str[year]: str[year] for year in df['Year'].unique[]}, ] ]] @app.callback[ Output['indicator-graphic', 'figure'], Input['xaxis-column', 'value'], Input['yaxis-column', 'value'], Input['xaxis-type', 'value'], Input['yaxis-type', 'value'], Input['year--slider', 'value']] def update_graph[xaxis_column_name, yaxis_column_name, xaxis_type, yaxis_type, year_value]: dff = df[df['Year'] == year_value] fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'], y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'], hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']] fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest'] fig.update_xaxes[title=xaxis_column_name, type='linear' if xaxis_type == 'Linear' else 'log'] fig.update_yaxes[title=yaxis_column_name, type='linear' if yaxis_type == 'Linear' else 'log'] return fig if __name__ == '__main__': app.run_server[debug=True]
thành phần có ID “
9”.from dash import Dash, dcc, html, Input, Output import plotly.express as px import pandas as pd app = Dash[__name__] df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv'] app.layout = html.Div[[ html.Div[[ html.Div[[ dcc.Dropdown[ df['Indicator Name'].unique[], 'Fertility rate, total [births per woman]', id='xaxis-column' ], dcc.RadioItems[ ['Linear', 'Log'], 'Linear', id='xaxis-type', inline=True ] ], style={'width': '48%', 'display': 'inline-block'}], html.Div[[ dcc.Dropdown[ df['Indicator Name'].unique[], 'Life expectancy at birth, total [years]', id='yaxis-column' ], dcc.RadioItems[ ['Linear', 'Log'], 'Linear', id='yaxis-type', inline=True ] ], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}] ]], dcc.Graph[id='indicator-graphic'], dcc.Slider[ df['Year'].min[], df['Year'].max[], step=None, id='year--slider', value=df['Year'].max[], marks={str[year]: str[year] for year in df['Year'].unique[]}, ] ]] @app.callback[ Output['indicator-graphic', 'figure'], Input['xaxis-column', 'value'], Input['yaxis-column', 'value'], Input['xaxis-type', 'value'], Input['yaxis-type', 'value'], Input['year--slider', 'value']] def update_graph[xaxis_column_name, yaxis_column_name, xaxis_type, yaxis_type, year_value]: dff = df[df['Year'] == year_value] fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'], y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'], hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']] fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest'] fig.update_xaxes[title=xaxis_column_name, type='linear' if xaxis_type == 'Linear' else 'log'] fig.update_yaxes[title=yaxis_column_name, type='linear' if yaxis_type == 'Linear' else 'log'] return fig if __name__ == '__main__': app.run_server[debug=True]
- Bất cứ khi nào một thuộc tính đầu vào thay đổi, chức năng mà
trình trang trí gọi lại kết thúc sẽ được gọi tự động.
Dash cung cấp hàm gọi lại này với giá trị mới của thuộc tính đầu vào dưới dạng
đối số của nó và Dash cập nhật thuộc tính của thành phần đầu ra
with whatever was returned by the function. - Từ khóa
40 vàfrom dash import Dash, dcc, html, Input, Output import plotly.express as px import pandas as pd df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'] app = Dash[__name__] app.layout = html.Div[[ dcc.Graph[id='graph-with-slider'], dcc.Slider[ df['year'].min[], df['year'].max[], step=None, value=df['year'].min[], marks={str[year]: str[year] for year in df['year'].unique[]}, id='year-slider' ] ]] @app.callback[ Output['graph-with-slider', 'figure'], Input['year-slider', 'value']] def update_figure[selected_year]: filtered_df = df[df.year == selected_year] fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp", size="pop", color="continent", hover_name="country", log_x=True, size_max=55] fig.update_layout[transition_duration=500] return fig if __name__ == '__main__': app.run_server[debug=True]
41 là tùy chọnfrom dash import Dash, dcc, html, Input, Output import plotly.express as px import pandas as pd df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'] app = Dash[__name__] app.layout = html.Div[[ dcc.Graph[id='graph-with-slider'], dcc.Slider[ df['year'].min[], df['year'].max[], step=None, value=df['year'].min[], marks={str[year]: str[year] for year in df['year'].unique[]}, id='year-slider' ] ]] @app.callback[ Output['graph-with-slider', 'figure'], Input['year-slider', 'value']] def update_figure[selected_year]: filtered_df = df[df.year == selected_year] fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp", size="pop", color="continent", hover_name="country", log_x=True, size_max=55] fig.update_layout[transition_duration=500] return fig if __name__ == '__main__': app.run_server[debug=True]
[chỉ có hai đối số cho mỗi đối tượng đó].
Chúng được bao gồm trong ví dụ này để làm rõ nhưng sẽ bị bỏ qua trong phần còn lại của tài liệu vì lý do ngắn gọn và dễ đọc. - Đừng nhầm lẫn giữa đối tượng
42 và đối tượngfrom dash import Dash, dcc, html, Input, Output import plotly.express as px import pandas as pd df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'] app = Dash[__name__] app.layout = html.Div[[ dcc.Graph[id='graph-with-slider'], dcc.Slider[ df['year'].min[], df['year'].max[], step=None, value=df['year'].min[], marks={str[year]: str[year] for year in df['year'].unique[]}, id='year-slider' ] ]] @app.callback[ Output['graph-with-slider', 'figure'], Input['year-slider', 'value']] def update_figure[selected_year]: filtered_df = df[df.year == selected_year] fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp", size="pop", color="continent", hover_name="country", log_x=True, size_max=55] fig.update_layout[transition_duration=500] return fig if __name__ == '__main__': app.run_server[debug=True]
43. Cái trước chỉ được sử dụng trong các định nghĩa gọi lại này và cái sau là một thành phần thực tếfrom dash import Dash, dcc, html, Input, Output import plotly.express as px import pandas as pd df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'] app = Dash[__name__] app.layout = html.Div[[ dcc.Graph[id='graph-with-slider'], dcc.Slider[ df['year'].min[], df['year'].max[], step=None, value=df['year'].min[], marks={str[year]: str[year] for year in df['year'].unique[]}, id='year-slider' ] ]] @app.callback[ Output['graph-with-slider', 'figure'], Input['year-slider', 'value']] def update_figure[selected_year]: filtered_df = df[df.year == selected_year] fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp", size="pop", color="continent", hover_name="country", log_x=True, size_max=55] fig.update_layout[transition_duration=500] return fig if __name__ == '__main__': app.run_server[debug=True]
- Lưu ý cách chúng tôi không đặt giá trị cho thuộc tính
8 của thành phầnfrom dash import Dash, dcc, html, Input, Output import plotly.express as px import pandas as pd app = Dash[__name__] df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv'] app.layout = html.Div[[ html.Div[[ html.Div[[ dcc.Dropdown[ df['Indicator Name'].unique[], 'Fertility rate, total [births per woman]', id='xaxis-column' ], dcc.RadioItems[ ['Linear', 'Log'], 'Linear', id='xaxis-type', inline=True ] ], style={'width': '48%', 'display': 'inline-block'}], html.Div[[ dcc.Dropdown[ df['Indicator Name'].unique[], 'Life expectancy at birth, total [years]', id='yaxis-column' ], dcc.RadioItems[ ['Linear', 'Log'], 'Linear', id='yaxis-type', inline=True ] ], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}] ]], dcc.Graph[id='indicator-graphic'], dcc.Slider[ df['Year'].min[], df['Year'].max[], step=None, id='year--slider', value=df['Year'].max[], marks={str[year]: str[year] for year in df['Year'].unique[]}, ] ]] @app.callback[ Output['indicator-graphic', 'figure'], Input['xaxis-column', 'value'], Input['yaxis-column', 'value'], Input['xaxis-type', 'value'], Input['yaxis-type', 'value'], Input['year--slider', 'value']] def update_graph[xaxis_column_name, yaxis_column_name, xaxis_type, yaxis_type, year_value]: dff = df[df['Year'] == year_value] fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'], y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'], hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']] fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest'] fig.update_xaxes[title=xaxis_column_name, type='linear' if xaxis_type == 'Linear' else 'log'] fig.update_yaxes[title=yaxis_column_name, type='linear' if yaxis_type == 'Linear' else 'log'] return fig if __name__ == '__main__': app.run_server[debug=True]
9 trongfrom dash import Dash, dcc, html, Input, Output import plotly.express as px import pandas as pd app = Dash[__name__] df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv'] app.layout = html.Div[[ html.Div[[ html.Div[[ dcc.Dropdown[ df['Indicator Name'].unique[], 'Fertility rate, total [births per woman]', id='xaxis-column' ], dcc.RadioItems[ ['Linear', 'Log'], 'Linear', id='xaxis-type', inline=True ] ], style={'width': '48%', 'display': 'inline-block'}], html.Div[[ dcc.Dropdown[ df['Indicator Name'].unique[], 'Life expectancy at birth, total [years]', id='yaxis-column' ], dcc.RadioItems[ ['Linear', 'Log'], 'Linear', id='yaxis-type', inline=True ] ], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}] ]], dcc.Graph[id='indicator-graphic'], dcc.Slider[ df['Year'].min[], df['Year'].max[], step=None, id='year--slider', value=df['Year'].max[], marks={str[year]: str[year] for year in df['Year'].unique[]}, ] ]] @app.callback[ Output['indicator-graphic', 'figure'], Input['xaxis-column', 'value'], Input['yaxis-column', 'value'], Input['xaxis-type', 'value'], Input['yaxis-type', 'value'], Input['year--slider', 'value']] def update_graph[xaxis_column_name, yaxis_column_name, xaxis_type, yaxis_type, year_value]: dff = df[df['Year'] == year_value] fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'], y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'], hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']] fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest'] fig.update_xaxes[title=xaxis_column_name, type='linear' if xaxis_type == 'Linear' else 'log'] fig.update_yaxes[title=yaxis_column_name, type='linear' if yaxis_type == 'Linear' else 'log'] return fig if __name__ == '__main__': app.run_server[debug=True]
0. Khi ứng dụng Dash khởi động, ứng dụngfrom dash import Dash, dcc, html, Input, Output import plotly.express as px import pandas as pd df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'] app = Dash[__name__] app.layout = html.Div[[ dcc.Graph[id='graph-with-slider'], dcc.Slider[ df['year'].min[], df['year'].max[], step=None, value=df['year'].min[], marks={str[year]: str[year] for year in df['year'].unique[]}, id='year-slider' ] ]] @app.callback[ Output['graph-with-slider', 'figure'], Input['year-slider', 'value']] def update_figure[selected_year]: filtered_df = df[df.year == selected_year] fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp", size="pop", color="continent", hover_name="country", log_x=True, size_max=55] fig.update_layout[transition_duration=500] return fig if __name__ == '__main__': app.run_server[debug=True]
tự động gọi tất cả các lệnh gọi lại có giá trị ban đầu của
các thành phần đầu vào để điền vào trạng thái ban đầu của đầu ra< . Trong ví dụ này, nếu bạn chỉ định thành phần div là
components. In this example, if you specified the div component as
47,from dash import Dash, dcc, html, Input, Output import plotly.express as px import pandas as pd df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'] app = Dash[__name__] app.layout = html.Div[[ dcc.Graph[id='graph-with-slider'], dcc.Slider[ df['year'].min[], df['year'].max[], step=None, value=df['year'].min[], marks={str[year]: str[year] for year in df['year'].unique[]}, id='year-slider' ] ]] @app.callback[ Output['graph-with-slider', 'figure'], Input['year-slider', 'value']] def update_figure[selected_year]: filtered_df = df[df.year == selected_year] fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp", size="pop", color="continent", hover_name="country", log_x=True, size_max=55] fig.update_layout[transition_duration=500] return fig if __name__ == '__main__': app.run_server[debug=True]
thành phần này sẽ bị ghi đè khi ứng dụng khởi động.
Nó giống như lập trình với Microsoft Excel.
bất cứ khi nào một ô thay đổi [đầu vào], tất cả các ô phụ thuộc vào ô đó [đầu ra]
sẽ được cập nhật tự động. Điều này được gọi là “Lập trình phản ứng” vì đầu ra tự động phản ứng với những thay đổi trong đầu vào.
Hãy nhớ cách mọi thành phần được mô tả hoàn toàn thông qua
tập hợp các đối số từ khóa của nó? .
Python become properties of the component,
and these properties are important now.
Với tính tương tác của Dash, chúng tôi có thể tự động cập nhật bất kỳ thuộc tính nào trong số đó
bằng cách sử dụng lệnh gọi lại. Thông thường, chúng tôi sẽ cập nhật thuộc tính
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
8 của các thành phần HTMLđể hiển thị văn bản mới [hãy nhớ rằng
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
8 chịu trách nhiệm về nội dung của một thành phần] hoặc thuộc tính from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
40 của from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
41component to display new data. We could also update the
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
3 of athành phần hoặc thậm chí là
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
43 có sẵn của thành phần from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
44. Hãy xem một ví dụ khác trong đó một
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
45 cập nhậta
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
41. Bố cục ứng dụng Dash với hình và thanh trượt
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
Chủ đề với Dash Enterprise Design Kit
Hình nền mặc định
chủ đề sao hỏa
Chủ đề sao Hải Vương
Chủ đề Miller
chủ đề ngoài hệ mặt trời
Chủ đề cài sẵn
Trong ví dụ này, thuộc tính
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
47 của from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
45 làđầu vào của ứng dụng và đầu ra của ứng dụng là thuộc tính
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
49 củafrom dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
41.Bất cứ khi nào
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
6 của from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
45 thay đổi, Dash sẽ gọihàm gọi lại
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
83 với giá trị mới. Hàm lọc khung dữ liệuvới giá trị mới này, xây dựng đối tượng
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
40và trả về ứng dụng Dash.
Có một vài mẫu đẹp trong ví dụ này
- Chúng tôi sử dụng thư viện Pandas để
tải khung dữ liệu của mình khi bắt đầu ứng dụng.
______385.
Khung dữ liệu
86 này ở trạng thái chung của ứng dụng và có thểfrom dash import Dash, dcc, html, Input, Output import plotly.express as px import pandas as pd df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'] app = Dash[__name__] app.layout = html.Div[[ dcc.Graph[id='graph-with-slider'], dcc.Slider[ df['year'].min[], df['year'].max[], step=None, value=df['year'].min[], marks={str[year]: str[year] for year in df['year'].unique[]}, id='year-slider' ] ]] @app.callback[ Output['graph-with-slider', 'figure'], Input['year-slider', 'value']] def update_figure[selected_year]: filtered_df = df[df.year == selected_year] fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp", size="pop", color="continent", hover_name="country", log_x=True, size_max=55] fig.update_layout[transition_duration=500] return fig if __name__ == '__main__': app.run_server[debug=True]
đọc bên trong các chức năng gọi lại. - Tải dữ liệu vào bộ nhớ có thể tốn kém. Bằng cách tải dữ liệu truy vấn tại
khi bắt đầu ứng dụng thay vì bên trong hàm gọi lại, chúng tôi đảm bảo
rằng thao tác này chỉ được thực hiện một lần – khi máy chủ ứng dụng khởi động. Khi người dùng
truy cập ứng dụng hoặc tương tác với ứng dụng, dữ liệu đó [
86] đã có trong bộ nhớ.from dash import Dash, dcc, html, Input, Output import plotly.express as px import pandas as pd df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'] app = Dash[__name__] app.layout = html.Div[[ dcc.Graph[id='graph-with-slider'], dcc.Slider[ df['year'].min[], df['year'].max[], step=None, value=df['year'].min[], marks={str[year]: str[year] for year in df['year'].unique[]}, id='year-slider' ] ]] @app.callback[ Output['graph-with-slider', 'figure'], Input['year-slider', 'value']] def update_figure[selected_year]: filtered_df = df[df.year == selected_year] fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp", size="pop", color="continent", hover_name="country", log_x=True, size_max=55] fig.update_layout[transition_duration=500] return fig if __name__ == '__main__': app.run_server[debug=True]
Nếu có thể, việc khởi tạo tốn kém [như tải xuống hoặc truy vấn
dữ liệu] nên được thực hiện trong phạm vi toàn cầu của ứng dụng thay vì trong
the callback functions. - Gọi lại không sửa đổi dữ liệu gốc, nó chỉ tạo bản sao
của khung dữ liệu bằng cách lọc bằng gấu trúc.
Điều này quan trọng. các lệnh gọi lại của bạn không bao giờ được sửa đổi các biến
ngoài phạm vi của chúng. Nếu lệnh gọi lại của bạn sửa đổi trạng thái chung, thì một
phiên của người dùng có thể ảnh hưởng đến phiên của người dùng tiếp theo và khi ứng dụng
được triển khai trên nhiều quy trình hoặc luồng, những sửa đổi đó sẽ .
be shared across sessions. - Chúng tôi đang bật chuyển đổi với
88 để đưa ra ý tưởngfrom dash import Dash, dcc, html, Input, Output import plotly.express as px import pandas as pd df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'] app = Dash[__name__] app.layout = html.Div[[ dcc.Graph[id='graph-with-slider'], dcc.Slider[ df['year'].min[], df['year'].max[], step=None, value=df['year'].min[], marks={str[year]: str[year] for year in df['year'].unique[]}, id='year-slider' ] ]] @app.callback[ Output['graph-with-slider', 'figure'], Input['year-slider', 'value']] def update_figure[selected_year]: filtered_df = df[df.year == selected_year] fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp", size="pop", color="continent", hover_name="country", log_x=True, size_max=55] fig.update_layout[transition_duration=500] return fig if __name__ == '__main__': app.run_server[debug=True]
về cách tập dữ liệu phát triển theo thời gian. quá trình chuyển đổi cho phép biểu đồ
cập nhật từ trạng thái này sang trạng thái tiếp theo một cách mượt mà, như thể nó là hoạt hình.
Ứng dụng Dash với nhiều đầu vào
Trong Dash, bất kỳ “đầu ra” nào cũng có thể có nhiều thành phần “đầu vào”.
Đây là một ví dụ đơn giản liên kết năm yếu tố đầu vào
[thuộc tính
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
6 của hai thành phần from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
44,hai thành phần
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
61 và một thành phần . to one output component [the
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
40 property of the from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
41 component].Lưu ý cách
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
65 liệt kê tất cả năm mục from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
0 sau from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
67. from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
Chủ đề với Dash Enterprise Design Kit
Hình nền mặc định
chủ đề sao hỏa
Chủ đề sao Hải Vương
Chủ đề Miller
chủ đề ngoài hệ mặt trời
Trình chỉnh sửa chủ đề bộ công cụ thiết kế
Trong ví dụ này, lệnh gọi lại thực thi bất cứ khi nào thuộc tính
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
6 của bất kỳfrom dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
44, from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
45,hoặc thành phần
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
61 nào thay đổi. Các đối số đầu vào của hàm gọi lại là giá trị
hiện tại của từng thuộc tính “đầu vào”, theo thứ tự chúng được
chỉ định.
Mặc dù chỉ có một
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
0 duy nhất thay đổi tại một thời điểm [i. e. người dùng chỉ có thể thay đổigiá trị của một Menu thả xuống duy nhất trong một thời điểm nhất định], Dash thu thập
trạng thái hiện tại của tất cả các thuộc tính
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
0 đã chỉ định và chuyển chúng< . Các chức năng gọi lại này luôn được đảm bảointo the callback function. These callback functions are always guaranteed
để nhận trạng thái cập nhật của ứng dụng.
Hãy mở rộng ví dụ của chúng tôi để bao gồm nhiều đầu ra
Ứng dụng Dash với nhiều đầu ra
Cho đến nay, tất cả các cuộc gọi lại chúng tôi đã viết chỉ cập nhật một thuộc tính
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
67 duy nhất. Chúng tôi cũng có thể cập nhật nhiều đầu ra cùng một lúc. liệt kê tất cả các thuộc tính bạn muốn cập nhật
trong
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
65,và trả lại nhiều mục đó từ hàm gọi lại. Điều này đặc biệt hữu ích nếu
hai đầu ra phụ thuộc vào cùng một kết quả trung gian cường độ tính toán cao,
chẳng hạn như truy vấn cơ sở dữ liệu chậm.
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
4Lời cảnh báo. không phải lúc nào cũng nên kết hợp các đầu ra, ngay cả khi
bạn có thể.
- Nếu đầu ra phụ thuộc vào một số chứ không phải tất cả các đầu vào giống nhau thì việc giữ
chúng riêng biệt có thể tránh được các cập nhật không cần thiết. - Nếu các đầu ra có cùng đầu vào nhưng chúng thực hiện các phép tính rất khác nhau với
các đầu vào này, thì việc tách biệt các lệnh gọi lại có thể cho phép chúng chạy song song.
Ứng dụng Dash với các cuộc gọi lại theo chuỗi
Bạn cũng có thể xâu chuỗi đầu ra và đầu vào với nhau. đầu ra của một hàm gọi lại
có thể là đầu vào của một hàm gọi lại khác.
Mẫu này có thể được sử dụng để tạo giao diện người dùng động, ví dụ: một thành phần đầu vào
cập nhật các tùy chọn khả dụng của một thành phần đầu vào khác.
Đây là một ví dụ đơn giản.
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
4Lệnh gọi lại đầu tiên cập nhật các tùy chọn khả dụng trong thành phần
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
61 thứ hai dựa trên giá trị đã chọn trongthành phần
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
61 đầu tiên. Lệnh gọi lại thứ hai đặt giá trị ban đầu khi thuộc tính
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
43thay đổi. nó đặt nó thành giá trị đầu tiên trong mảng
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
43 đó. Cuộc gọi lại cuối cùng hiển thị
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
6 đã chọn của mỗi thành phần. Nếu bạn thay đổi thành phần
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
6 của quốc gia from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
61, Dash sẽ đợi cho đến khi thành phần
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
6 của thành phố được cập nhật. Điều này ngăn các cuộc gọi lại của bạn
được gọi với trạng thái không nhất quán như với
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
24 và from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
25. Ứng dụng Dash có trạng thái
Trong một số trường hợp, bạn có thể có mẫu giống như “biểu mẫu” trong
ứng dụng của mình. Trong tình huống như vậy, bạn có thể muốn đọc giá trị
của một thành phần đầu vào, nhưng chỉ khi người dùng hoàn tất
nhập tất cả thông tin của họ vào biểu mẫu .
it changes.
Việc đính kèm một cuộc gọi lại trực tiếp vào các giá trị đầu vào có thể trông như thế này
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
8Trong ví dụ này, hàm gọi lại được kích hoạt bất cứ khi nào
thuộc tính được mô tả bởi
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
0 thay đổi. Hãy tự mình thử bằng cách nhập dữ liệu vào các mục nhập ở trên.
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
1 cho phép bạn chuyển các giá trị bổ sung mà khôngthực hiện lệnh gọi lại. Đây là ví dụ tương tự như trên nhưng với hai thành phần
____143 là
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
1và một thành phần nút mới là
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
0. from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
6Trong ví dụ này, việc thay đổi văn bản trong hộp
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
43 sẽ không kích hoạtgọi lại, nhưng việc nhấp vào nút sẽ. Giá trị hiện tại của
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
43 giá trị vẫn được chuyển vào hàm gọi lại mặc dùchúng không tự kích hoạt hàm gọi lại.
Lưu ý rằng chúng tôi đang kích hoạt gọi lại bằng cách lắng nghe thuộc tính
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
33của thành phần
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
34. from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
33 là thuộc tính đượctăng lên mỗi khi thành phần được nhấp vào.
Nó có sẵn trong mọi thành phần trong
Các thành phần HTML của Dash [
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
2], nhưng hữu ích nhất với các nút. Chuyển các thành phần vào cuộc gọi lại thay vì ID
Khi tạo bố cục ứng dụng trong các ví dụ trước, chúng tôi đã chỉ định ID cho các thành phần trong bố cục và sau đó tham chiếu các mã này trong đầu vào và đầu ra gọi lại
Trong ví dụ đầu tiên, có một thành phần
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
43 với from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
5 'đầu vào của tôi' và một from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
39 với ______15 'đầu ra của tôi'from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
1Bạn cũng có thể cung cấp các thành phần trực tiếp dưới dạng đầu vào và đầu ra mà không cần thêm hoặc tham chiếu đến một
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
5. Dash tự động tạo ID cho các thành phần nàyĐây là ví dụ đầu tiên một lần nữa. Trước khi khai báo bố cục ứng dụng, chúng tôi tạo hai thành phần, gán cho mỗi thành phần một biến. Sau đó, chúng tôi tham chiếu các biến này trong bố cục và chuyển chúng trực tiếp làm đầu vào và đầu ra cho hàm gọi lại
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
2Trong Trăn 3. 8 trở lên, bạn có thể sử dụng toán tử hải mã để khai báo các biến thành phần trong bố cục ứng dụng
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
3Ghi chú. ID thành phần tự động sẽ không hoạt động với nội dung gọi lại động trừ khi các biến thành phần được xác định ngoài phạm vi gọi lại. Ngoài ra, chúng không tương thích với Gọi lại khớp mẫu
Tóm lược
Chúng tôi đã đề cập đến các nguyên tắc cơ bản của lệnh gọi lại trong Dash.
Ứng dụng Dash được xây dựng dựa trên
các nguyên tắc đơn giản nhưng mạnh mẽ. Giao diện người dùng có thể tùy chỉnh
thông qua lệnh gọi lại phản ứng.
Mọi thuộc tính/thuộc tính của một thành phần có thể được sửa đổi
dưới dạng đầu ra của lệnh gọi lại, trong khi một tập hợp con của các thuộc tính [chẳng hạn như
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
app = Dash[__name__]
df = pd.read_csv['//plotly.github.io/datasets/country_indicators.csv']
app.layout = html.Div[[
html.Div[[
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Fertility rate, total [births per woman]',
id='xaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='xaxis-type',
inline=True
]
], style={'width': '48%', 'display': 'inline-block'}],
html.Div[[
dcc.Dropdown[
df['Indicator Name'].unique[],
'Life expectancy at birth, total [years]',
id='yaxis-column'
],
dcc.RadioItems[
['Linear', 'Log'],
'Linear',
id='yaxis-type',
inline=True
]
], style={'width': '48%', 'float': 'right', 'display': 'inline-block'}]
]],
dcc.Graph[id='indicator-graphic'],
dcc.Slider[
df['Year'].min[],
df['Year'].max[],
step=None,
id='year--slider',
value=df['Year'].max[],
marks={str[year]: str[year] for year in df['Year'].unique[]},
]
]]
@app.callback[
Output['indicator-graphic', 'figure'],
Input['xaxis-column', 'value'],
Input['yaxis-column', 'value'],
Input['xaxis-type', 'value'],
Input['yaxis-type', 'value'],
Input['year--slider', 'value']]
def update_graph[xaxis_column_name, yaxis_column_name,
xaxis_type, yaxis_type,
year_value]:
dff = df[df['Year'] == year_value]
fig = px.scatter[x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']]
fig.update_layout[margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest']
fig.update_xaxes[title=xaxis_column_name,
type='linear' if xaxis_type == 'Linear' else 'log']
fig.update_yaxes[title=yaxis_column_name,
type='linear' if yaxis_type == 'Linear' else 'log']
return fig
if __name__ == '__main__':
app.run_server[debug=True]
6property of
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
df = pd.read_csv['//raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv']
app = Dash[__name__]
app.layout = html.Div[[
dcc.Graph[id='graph-with-slider'],
dcc.Slider[
df['year'].min[],
df['year'].max[],
step=None,
value=df['year'].min[],
marks={str[year]: str[year] for year in df['year'].unique[]},
id='year-slider'
]
]]
@app.callback[
Output['graph-with-slider', 'figure'],
Input['year-slider', 'value']]
def update_figure[selected_year]:
filtered_df = df[df.year == selected_year]
fig = px.scatter[filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55]
fig.update_layout[transition_duration=500]
return fig
if __name__ == '__main__':
app.run_server[debug=True]
44 component]are editable by the user through interacting with the page.
Phần tiếp theo của hướng dẫn Dash bao gồm đồ thị tương tác. Hướng dẫn Dash Phần 4. Vẽ đồ thị tương tác