一、Dash基础概念
1. Dash应用基本结构
import dash
from dash import dcc, html
import plotly.express as px
# 创建Dash应用实例
app = dash.Dash(__name__)
# 定义布局
app.layout = html.Div([
html.H1("我的第一个Dash应用"),
dcc.Graph(
id='example-graph',
figure=px.line(x=[1,2,3], y=[4,1,2], title="简单折线图")
)
])
# 运行应用
if __name__ == '__main__':
app.run(debug=True)
2. 核心组件
- html模块：提供HTML标签组件
html.Div：容器html.H1到html.H6：标题html.P：段落html.Label：标签
- dcc模块：提供交互式组件
dcc.Graph：图表dcc.Slider：滑块dcc.Dropdown：下拉菜单dcc.Input：输入框
二、构图布局技巧
1. 基本布局原则
- 垂直布局：组件默认从上到下排列
- 水平布局：使用
style={'display': 'flex'}实现 - 响应式设计：使用百分比宽度
2. 布局示例
app.layout = html.Div([
# 标题区域
html.Div([
html.H1("利率监控器", style={'textAlign': 'center'})
], style={'backgroundColor': '#f0f8ff', 'padding': '20px'}),
# 控制面板（水平排列）
html.Div([
html.Div([
html.Label("参数A"),
dcc.Slider(id='slider-a', min=0, max=100, value=50)
], style={'flex': 1, 'padding': '10px'}),
html.Div([
html.Label("参数B"),
dcc.Slider(id='slider-b', min=0, max=100, value=30)
], style={'flex': 1, 'padding': '10px'}),
], style={'display': 'flex', 'margin': '20px 0'}),
# 图表区域（垂直排列）
html.Div([
dcc.Graph(id='chart-1'),
dcc.Graph(id='chart-2')
])
])
3. 布局技巧
- 使用卡片式设计：添加边框、阴影和圆角
- 分组相关控件：使用Div包裹相关控件
- 添加间距：使用margin和padding
- 颜色搭配：使用柔和的专业配色
三、Plotly图表基础
1. 创建简单图表
import plotly.express as px
# 创建折线图
fig = px.line(
x=[1, 2, 3, 4],
y=[10, 11, 12, 13],
title="简单折线图",
labels={'x': '季度', 'y': '收益率'}
)
# 创建柱状图
fig = px.bar(
x=['Q1', 'Q2', 'Q3', 'Q4'],
y=[95, 105, 110, 120],
title="季度收益能力"
)
2. 图表美化
fig.update_layout(
title_font_size=20,
title_x=0.5, # 标题居中
plot_bgcolor='#f9f9f9',
paper_bgcolor='#ffffff',
xaxis_title="季度",
yaxis_title="比率(%)",
yaxis_range=[80, 150], # Y轴范围
shapes=[{ # 添加参考线
'type': 'line',
'x0': 0,
'x1': 1,
'y0': 100,
'y1': 100,
'xref': 'paper',
'yref': 'y',
'line': {'color': 'red', 'dash': 'dash'}
}]
)
fig.update_traces(
line=dict(width=3, color='blue'),
marker=dict(size=10, color='green')
)
四、构图技巧详解
1. 布局结构设计
- 标题区域：清晰展示应用主题
- 控制面板：水平排列的参数控件
- 使用卡片式设计增强视觉层次
- 添加间距避免拥挤
- 图表区域：使用统一的设计风格
2. 视觉设计原则
- 一致性：所有控件使用相似样式
- 对比：使用不同颜色区分图表
- 对齐：所有元素保持对齐
- 留白：使用padding和margin创造呼吸空间
- 层次：通过阴影和背景色创建层次感
3. 响应式设计
- 使用
flexWrap: 'wrap'确保小屏幕上控件自动换行 - 使用百分比宽度而非固定像素
- 图表高度使用视口高度单位(vh)
五、Dash 与 Plotly 学习路径思维导图
1. 基础知识准备
1. Python 基础
- 数据类型和结构
- 函数和类
- 装饰器（回调基础）
2. Web 基础概念
- HTML/CSS 基础
- 客户端/服务器架构
- JSON 数据格式
2. Plotly 核心知识
1. Plotly 图形对象
- 基础图表类型：折线图、柱状图、散点图
- 金融图表：K线图、面积图
- 高级图表：子图、3D图表、地图
2. 图表定制化
- 布局设置 (Layout)
- 样式和主题
- 交互功能：悬停提示、缩放、平移
3. 数据处理
- 与Pandas/Numpy集成
- 时间序列处理
- 大型数据集优化
3. Dash 核心框架
1. Dash 应用结构
- 应用初始化
- 布局(Layout)系统
- 组件(Components)体系
2. 核心组件库 (dcc)
- 图形(Graph)组件
- 交互组件：滑块、下拉菜单、输入框
- 数据存储组件
3. HTML 组件 (html)
- 基础HTML标签
- 样式和CSS集成
- 页面布局技巧
4. 回调(Callback)系统
- 输入/输出机制
- 状态管理
- 链式回调
- 防止重复回调
4. 高级功能
1. 多页应用
- 页面路由
- 导航设计
- URL参数处理
2. 性能优化
- 回调缓存
- 大数据集处理
- 异步加载
3. 样式和布局进阶
- Bootstrap集成
- 响应式设计
- 自定义CSS
4. 部署和发布
- 本地部署
- 服务器部署
- Dash企业版功能
5. 实战项目类型
1. 金融仪表板（如您提到的偿付比率监控器）
- 时间序列可视化
- 交互参数控制
- 实时数据更新
2. 业务分析看板
- 多维度数据筛选
- 交叉分析功能
- 数据导出
3. 科学数据可视化
- 3D模型展示
- 大型数据集渲染
- 交互式探索
4. 实时监控系统
- 自动更新机制
- 警报和通知
- 历史数据回溯
6. 学习资源推荐
1. 官方文档
- Plotly Python文档
- Dash核心文档
- Dash组件文档
2. 社区资源
- Plotly社区论坛
- GitHub示例库
- Stack Overflow标签
3. 实践平台
- 本地开发环境
- Jupyter Notebook集成
- 云部署平台
7. 学习建议时间规划
-
第一阶段：基础入门（1-2周）
- 掌握Plotly基础图表绘制
- 了解Dash应用基本结构
- 创建简单静态仪表板
-
第二阶段：交互功能（2-3周）
- 学习回调系统
- 实现用户交互功能
- 处理多输入多输出场景
-
第三阶段：高级应用（3-4周）
- 优化应用性能
- 设计多页应用
- 掌握部署方法
-
第四阶段：项目实战（持续）
- 完成综合项目
- 解决实际业务问题
- 参与开源项目贡献
import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
i
mport numpy as np
# 初始化Dash应用
app = dash.Dash(__name__)
# 1. 应用布局
app.layout = html.Div([
# 标题区域
html.Div([
html.H1("资产负债率监控器",
style={'textAlign': 'center', 'color': '#2c3e50', 'marginBottom': '20px'})
], style={'backgroundColor': '#f8f9fa', 'padding': '20px', 'borderRadius': '10px'}),
# 控制面板 - 使用Flex布局水平排列
html.Div([
# 初始资产负债率
html.Div([
html.Label("初始资产负债率 (%)", style={'fontWeight': 'bold', 'marginBottom': '5px'}),
dcc.Slider(
id='initial-ratio',
min=100,
max=300,
step=5,
value=250,
marks={i: str(i) for i in range(100, 501, 50)},
tooltip={"placement": "bottom", "always_visible": True}
)
], style={'flex': 1, 'padding': '15px', 'backgroundColor': '#ffffff', 'borderRadius': '8px', 'boxShadow': '0 2px 4px rgba(0,0,0,0.1)'}),
# 利率基准控制
html.Div([
html.Label("利率基准 (%)", style={'fontWeight': 'bold', 'marginBottom': '5px'}),
dcc.Slider(
id='base-rate',
min=0,
max=10,
step=0.1,
value=3.5,
marks={i: f"{i}%" for i in range(0, 11, 2)},
tooltip={"placement": "bottom", "always_visible": True}
)
], style={'flex': 1, 'padding': '15px', 'backgroundColor': '#ffffff', 'borderRadius': '8px', 'boxShadow': '0 2px 4px rgba(0,0,0,0.1)', 'marginLeft': '10px'}),
# 利率波动率控制
html.Div([
html.Label("利率波动率", style={'fontWeight': 'bold', 'marginBottom': '5px'}),
dcc.Slider(
id='rate-volatility',
min=0,
max=2,
step=0.1,
value=0.5,
marks={i: str(i) for i in [0, 0.5, 1, 1.5, 2]},
tooltip={"placement": "bottom", "always_visible": True}
)
], style={'flex': 1, 'padding': '15px', 'backgroundColor': '#ffffff', 'borderRadius': '8px', 'boxShadow': '0 2px 4px rgba(0,0,0,0.1)', 'marginLeft': '10px'}),
# 经济情景选择
html.Div([
html.Label("经济情景", style={'fontWeight': 'bold', 'marginBottom': '5px'}),
dcc.Dropdown(
id='scenario',
options=[
{'label': '乐观', 'value': 'optimistic'},
{'label': '中性', 'value': 'neutral'},
{'label': '悲观', 'value': 'pessimistic'}
],
value='neutral',
clearable=False,
style={'width': '100%'}
)
], style={'flex': 1, 'padding': '15px', 'backgroundColor': '#ffffff', 'borderRadius': '8px', 'boxShadow': '0 2px 4px rgba(0,0,0,0.1)', 'marginLeft': '10px'}),
], style={
'display': 'flex',
'margin': '20px 0',
'flexWrap': 'wrap' # 在小屏幕上自动换行
}),
# 图表区域 - 垂直排列
html.Div([
# 资产负债率图表
dcc.Graph(id='solvency-chart', style={'height': '45vh', 'marginBottom': '20px'}),
# 利率变化图表
dcc.Graph(id='interest-chart', style={'height': '45vh'})
], style={
'padding': '20px',
'backgroundColor': '#ffffff',
'borderRadius': '10px',
'boxShadow': '0 4px 6px rgba(0,0,0,0.1)'
})
], style={
'fontFamily': 'Arial, sans-serif',
'maxWidth': '1200px',
'margin': '0 auto',
'padding': '20px',
'backgroundColor': '#f0f2f5'
})
# 2. 数据处理函数
def generate_data(initial_ratio, base_rate, rate_volatility, scenario):
"""
生成模拟的金融数据
"""
# 创建20个季度的时间序列
quarters = pd.date_range(start='2025-01-01', periods=20, freq='QE')
# 生成利率数据 - 使用随机游走模型
np.random.seed(42) # 确保结果可重现
rate_changes = np.random.normal(0, rate_volatility, 20)
interest_rates = base_rate + np.cumsum(rate_changes)
# 生成资产负债率数据
solvency_ratios = [initial_ratio]
for i in range(1, 20):
# 基础变化（随机波动）
change = np.random.normal(0, 5)
# 根据情景调整
if scenario == 'optimistic':
change += np.random.uniform(0, 3) # 乐观情景下增加
elif scenario == 'pessimistic':
change -= np.random.uniform(0, 3) # 悲观情景下减少
# 根据利率变化调整
interest_change = interest_rates[i] - interest_rates[i-1]
change -= interest_change * 5 # 假设利率每上升1%，资产负债率下降5%
new_ratio = solvency_ratios[-1] + change
# 确保资产负债率在合理范围内
solvency_ratios.append(max(100, min(new_ratio, 300)))
# 创建DataFrame
df = pd.DataFrame({
'季度': quarters,
'资产负债率': solvency_ratios,
'利率': interest_rates
})
return df
# 3. 回调函数 - 连接输入和输出
@app.callback(
[Output('solvency-chart', 'figure'),
Output('interest-chart', 'figure')],
[Input('initial-ratio', 'value'),
Input('base-rate', 'value'),
Input('rate-volatility', 'value'),
Input('scenario', 'value')]
)
def update_charts(initial_ratio, base_rate, rate_volatility, scenario):
# 生成数据
df = generate_data(initial_ratio, base_rate, rate_volatility, scenario)
# 创建资产负债率图表
solvency_fig = px.line(
df,
x='季度',
y='资产负债率',
title='5年资产负债率变化',
labels={'资产负债率': '(%)'},
template='plotly_white'
)
# 美化资产负债率图表
solvency_fig.update_layout(
yaxis_range=[100, 300],
shapes=[{
'type': 'line',
'x0': df['季度'].min(),
'x1': df['季度'].max(),
'y0': 150,
'y1': 150,
'line': {'color': 'red', 'dash': 'dash', 'width': 2},
}],
annotations=[
dict(
x=df['季度'].max(),
y=200,
text="监管最低要求",
showarrow=False,
xshift=10,
bgcolor="white",
font=dict(size=12)
)
],
hovermode='x unified',
title_font_size=20,
title_x=0.5
)
solvency_fig.update_traces(
line=dict(width=3, color='#3498db'),
mode='lines+markers',
marker=dict(size=8, color='#2980b9')
)
# 创建利率图表
interest_fig = px.line(
df,
x='季度',
y='利率',
title='5年利率变化',
labels={'利率': '利率 (%)'},
template='plotly_white'
)
# 美化利率图表
interest_fig.update_traces(
line=dict(width=3, color='#27ae60'),
mode='lines+markers',
marker=dict(size=8, color='#2ecc71')
)
interest_fig.update_layout(
hovermode='x unified',
title_font_size=20,
title_x=0.5
)
return solvency_fig, interest_fig
# 4. 运行应用
if __name__ == '__main__':
app.run(debug=True, port=8050)
使用说明
- 安装所需库：
pip install dash plotly pandas numpy
- 运行程序：
python app.py
- 在浏览器中打开 http://127.0.0.1:8050/
561
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
