Dash 动态更新图表

在现代数据可视化应用中，动态更新图表是一个非常重要的功能，它允许用户在不刷新整个页面的情况下，实时查看数据的变化。

在 Dash 中，动态更新图表的核心机制是 回调函数（Callback），回调函数允许你在用户与页面交互时（如点击按钮、选择下拉菜单等），动态地更新图表的内容。

回调函数的基本结构

一个典型的回调函数包含以下几个部分：

输入（Input）: 定义触发回调的组件及其属性。
输出（Output）: 定义需要更新的组件及其属性。
回调函数体: 根据输入值计算并返回输出值。

Dash 回调函数详解参见：https://www.runoob.com/dash/dash-callback.html。

简单的动态更新图表

通过回调函数，可以动态更新图表的数据和布局。

以下是一个完整的 Dash 应用示例，用户可以通过下拉菜单选择数据集，动态显示对应的折线图：

实例

from dash import Dash, html, dcc, Input, Output
import plotly.express as px
import pandas as pd

# 创建 Dash 应用
app = Dash(__name__)

# 定义示例数据集
datasets = {
'数据集1': pd.DataFrame({
'x': [1, 2, 3, 4, 5],
'y': [10, 15, 13, 17, 21]
}),
'数据集2': pd.DataFrame({
'x': [1, 2, 3, 4, 5],
'y': [5, 10, 8, 12, 15]
}),
'数据集3': pd.DataFrame({
'x': [1, 2, 3, 4, 5],
'y': [20, 18, 22, 19, 25]
})
}

# 定义布局
app.layout = html.Div([
html.H1("动态折线图示例"), # 标题
dcc.Dropdown(
id='dataset-dropdown', # 下拉菜单的 ID
options=[{'label': name, 'value': name} for name in datasets.keys()], # 下拉菜单选项
value='数据集1' # 默认选中的数据集
),
dcc.Graph(id='line-chart') # 用于显示折线图的 Graph 组件
])

# 定义回调函数
@app.callback(
Output('line-chart', 'figure'), # 输出到 id 为 'line-chart' 的 Graph 组件的 figure 属性
Input('dataset-dropdown', 'value') # 输入来自 id 为 'dataset-dropdown' 的下拉菜单的 value 属性
)
def update_line_chart(selected_dataset):
# 获取选中的数据集
df = datasets[selected_dataset]
# 使用 Plotly Express 创建折线图
fig = px.line(df, x='x', y='y', title=f'{selected_dataset} 折线图')
return fig

# 运行应用
if __name__ == '__main__':
app.run_server(debug=True) # 启动应用，debug=True 表示开启调试模式

显示如下所示：

代码解析

1、布局部分：

使用 html.H1 创建一个标题"计算平方"。
使用 dcc.Input 创建一个数字输入框，id 为 number-input，类型为 number。
使用 html.Div 创建一个用于显示结果的区域，id 为 output。

2、回调函数：

使用 @app.callback 装饰器定义回调函数。
输入是 number-input 输入框的 value 属性。
输出是 output Div 的 children 属性。
在回调函数中：
- 检查输入是否为空。
- 将输入转换为浮点数并计算平方。
- 返回格式化后的结果。

4、运行应用：

使用 app.run_server(debug=True) 启动应用，debug=True 表示开启调试模式。

返回顶部

菜鸟教程

Dash 动态更新图表

回调函数的基本结构

简单的动态更新图表

实例

代码解析