（数据科学学习手札118）Python+Dash快速web应用开发——特殊部件篇 (3)

app4.py

import dash import pandas as pd import dash_datetimepicker import dash_html_components as html import dash_bootstrap_components as dbc from dash.dependencies import Input, Output app = dash.Dash(__name__) app.layout = dbc.Container( [ dash_datetimepicker.DashDatetimepicker(id="datetime-picker"), html.H6(id='datetime-output', style={'margin-top': '20px'}) ], style={ 'margin-top': '100px', 'max-width': '600px' } ) @app.callback( Output('datetime-output', 'children'), [Input('datetime-picker', 'startDate'), Input('datetime-picker', 'endDate')] ) def datetime_range(startDate, endDate): # 修正8小时时间差bug并格式化为字符串 startDate = (pd.to_datetime(startDate) + pd.Timedelta(hours=8)).strftime('%Y-%m-%d %H:%M') endDate = (pd.to_datetime(endDate) + pd.Timedelta(hours=8)).strftime('%Y-%m-%d %H:%M') return f'从 {startDate} 到 {endDate}' if __name__ == "__main__": app.run_server(debug=True)

图6 3 动手打造一个实时可视化大屏

　　在学习完今天的内容之后，我们就可以做一些功能上很amazing的事情——搭建一个实时更新的可视化仪表盘。

　　思路其实很简单，主要用到今天学习到的Interval()与Store()，原理是先从官网静态的案例中移植js代码到Dash的浏览器端回调中，构建出输入为Store()的data的回调函数；

　　再利用Interval()的n_intervals触发Store()的data更新，从而实现这套从数据更新到图表更新的链式反应。效果如下：

图7

　　而代码涉及到多个文件，这里就不直接放出，你可以在文章开头的地址中找到对应本期的附件进行学习。