从零开始学习Dash和Plotly：基础学习

原创 已于 2025-09-10 01:50:48 修改 · 499 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#dash #plotly #python #数据分析

于 2025-09-10 01:34:36 首次发布

一、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. 布局结构设计

  1. 标题区域：清晰展示应用主题
  2. 控制面板：水平排列的参数控件
    • 使用卡片式设计增强视觉层次
    • 添加间距避免拥挤
  3. 图表区域：使用统一的设计风格

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. 第一阶段：基础入门（1-2周）

    • 掌握Plotly基础图表绘制
    • 了解Dash应用基本结构
    • 创建简单静态仪表板

  2. 第二阶段：交互功能（2-3周）

    • 学习回调系统
    • 实现用户交互功能
    • 处理多输入多输出场景

  3. 第三阶段：高级应用（3-4周）

    • 优化应用性能
    • 设计多页应用
    • 掌握部署方法

  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)

使用说明

  1. 安装所需库：
pip install dash plotly pandas numpy
  1. 运行程序：
python app.py
  1. 在浏览器中打开 http://127.0.0.1:8050/
利用Python进行数据可视化（Plotly与Dash的应用）
程序员Gloria的博客
06-05 597
本文详细介绍了将Dash应用部署到生产环境的关键步骤和必要措施。首先，我们讨论了使用Gunicorn和Nginx来部署Dash应用的方法，并展示了如何通过HTTPS协议提高应用的安全性。接着，我们探讨了如何集成用户认证和权限管理系统，以及如何配置日志记录和错误处理，从而提高应用的稳定性和可靠性。最后，我们强调了监控和性能优化的重要性，并提出了一些监控工具和优化方法。通过这些措施，我们可以将Dash应用部署到生产环境中，并使其在生产环境中更加健壮和可靠，为用户提供优质的服务和体验。
使用 Plotly Dash 构建交互式数据仪表板：从入门到精通的全面指南
程序员Gloria的博客
06-23 1306
总的来说，本文介绍了如何使用 Plotly Dash 构建交互式数据仪表板。我们从一个简单的例子开始，逐步扩展了仪表板的功能，包括添加颜色和大小选择功能、不同类型的图表选择功能以及多个数据集的选择功能。通过这些例子，读者可以学习如何使用 Dash 的核心组件和回调函数来构建自己的数据仪表板，并根据需要添加交互功能和多样化的数据可视化。Plotly Dash 是一个强大的 Python 框架，可以帮助用户轻松构建交互式数据仪表板。
利用Python进行数据可视化Plotly与Dash的应用
一键难忘的博客
03-27 3911
数据可视化是数据分析中至关重要的一环，它能够帮助我们更直观地理解数据并发现隐藏的模式和趋势。在Python中，有许多强大的工具可以用来进行数据可视化，其中Plotly和Dash是两个备受欢迎的选择。Plotly提供了丰富多样的交互式绘图功能，而Dash则是一个用于构建交互式Web应用的Python框架。本文将介绍如何使用Plotly和Dash进行数据可视化，并通过案例代码展示其应用。
dash 初体验（拔草）
细节处有神明的博客
03-23 631
Dash是一个高效简洁的Python框架，建立在FlaskPoltly.js以及React.js的基础上，设计之初是为了帮助的数据分析人员，以纯Python编程的方式快速开发出交互式的数据可视化 web 应用。
dash学习（公开文档）
weixin_51585624的博客
10-12 508
dash嵌套pyechart的html文件。
dash入门
鸭梨的博客
02-06 652
Dash是一个用于构建交互式数据可视化应用的Python框架，由Plotly公司开发。它允许用户快速创建基于Web的应用程序，支持动态更新和用户交互。通过以上步骤，你可以快速入门Dash，并开始构建自己的交互式数据可视化应用。不断实践和探索官方文档及社区资源将帮助你更深入地掌握Dash的各种功能和技巧。
数据交互式可视化《Dash》框架学习（三）
garrulousabyss的博客
10-25 2222
一. 交互式可视化 1. 当鼠标悬浮时，更新图表 import dash import dash_core_components as dcc import dash_html_components as html import pandas as pd import plotly.graph_objs as go external_stylesheets = ['https://code...
【python】小白也能懂的Dash从入门到实战秘籍
最新发布
大雨的博客
07-27 4604
通过这篇教程，我们深入学习了 Dash 框架，从基础概念到实际应用，全面了解了它在数据可视化领域的强大能力。我们了解到 Dash 是基于 Python 的开源框架，能轻松构建交互式数据可视化 Web 应用，无需复杂前端知识。通过安装和配置环境，我们创建了第一个 Dash 应用，初步领略了其简洁易用的特性。在核心组件部分，详细学习了布局组件、核心组件和扩展组件，掌握了如何构建美观且功能丰富的界面 。
【交互式数据仪表板】Plotly Dash完全指南：从零搭建到部署全流程 | Python数据可视化必备
熵数实验室
04-25 2586
Dash 是由 Plotly 开发的开源 Python 框架，专为构建数据分析应用和交互式仪表板而设计。Dash 的核心优势在于它允许开发者使用纯 Python 代码创建完整的 Web 应用程序，而无需编写 JavaScript、HTML 或 CSS。这使得数据科学家和分析师能够将其分析工作直接转化为交互式应用。Dash 建立在 Plotly.js、React 和 Flask 之上，整合了这些技术的优势：Dash 特别适合以下场景：Dash 应用需要几个核心包： 2.2 基本应用结构 一个最小化的 Dash
打造高效Plotly Dash应用：一键配置与部署模板
开发者可以基于这个模板快速开始一个Dash应用程序的开发工作，而不需要从零开始搭建整个应用程序。这种模板的好处是： 1. 节省时间：由于模板已经提供了基本的项目结构和代码，开发者可以跳过这些初步的搭建步骤，...
Dash仪表盘：从网页抓取到交互式图形集成
### Dash 仪表盘：从网页抓取到交互式图形集成 #### 1. 网页表格的网络抓取 在 Python 中进行网络抓取相对容易，特别是对于从静态页面收集 HTML 表格这类基本操作。主要借助 pandas 的 `pd.read_html()` 函数，只需...
Dash框架学习记录_001
bierxiensi的博客
04-09 947
从 dash 中创建一个 Dash 应用程序,app 的类型为 dash.Dash app = dash.Dash()，添加样式后格式应为app = dash.Dash(_name) Including custom CSS or JavaScript in your Dash apps is simple. Just create a folder named assets in the ro...
【Python】Dash简单介绍
Ashley的小窝
09-19 7610
简单介绍Dash是一个基于FlaskPoltly.js以及React.js的Python框架，由plotly公司开发，设计之初是为了帮助数据分析人员进行快速的数据可视化网页搭建。现时Dash已经是一个相当成熟的框架，拥有丰富的社区资源与生态。1、简单介绍由于Dash是基于Flask框架建立的，其运行方式与执行逻辑和Flask是大同小异的。但Flask需要自己处理前后端的连接，且对前端后端知识有一定的了解，这对数据人员来说并不友好。Dash则将前端后端集成在一起，只需写简单的回调就能实现交互功能。
【Dash搭建可视化网站】项目8：个人理财管理系统大屏制作步骤详解
lys_828的博客
04-22 2959
项目8：个人理财管理系统大屏制作步骤详解1 运行预览图2 项目架构3 模块介绍3.1 assets和data文件夹介绍3.2主框架搭建 1 运行预览图 点击中间的账单下拉菜单，选择对应的月份账单，右侧的版面信息会进行相对应的变化。 2 项目架构 从这个项目开始，代码量就相对较多了，为了避免所有的代码都在一个执行文件下（显着很冗肿，代码可读性较差），在敲代码之前首先需要规划好整个项目的架构布局，代码采用模块化的方式进行设计，具体的项目安排如下： 3 模块介绍 其中dash-vs-personal-app-t
【Dash搭建可视化网站】项目13：销售数据可视化大屏制作步骤详解
lys_828的博客
01-12 4185
1 项目效果图 2 项目架构 3 文件介绍和功能完善 3.1 assets文件夹介绍 3.2 app.py和index.py文件完善 3.3 header.py文件完善 3.4 api.py文件和api.ipynb文件完善 3.4.1 需求数据获取 3.4.2 header.py文件中数据变更 3.5 middle.py文件完善
【亲测免费】 探秘Dash：一个强大的开源Web应用框架
gitblog_00026的博客
04-19 717
探秘Dash：一个强大的开源Web应用框架 项目简介 是由Circular Studios开发的一个创新的、轻量级且功能强大的Web应用框架。它允许开发者以Python为基础，构建交互式的数据可视化和网页应用程序，无需深入HTML、CSS或JavaScript等前端语言。无论你是数据科学家、工程师还是对构建交互式Web应用感兴趣的初学者，Dash都能提供一种直观、高效的方式来实现你的目标。 技术分...
【亲测免费】 Dash 项目教程
gitblog_00198的博客
09-08 1194
Dash 项目教程 1. 项目介绍 Dash 是一个开源的 Python 框架，专门用于构建数据驱动的 Web 应用程序。它结合了 Flask、React 和 Plotly 的强大功能，使得开发者可以轻松地创建交互式数据可视化应用。Dash 的核心优势在于其简洁的 API 和强大的数据处理能力，适用于数据科学家和开发者快速构建原型或生产级别的应用。 2. 项目快速启动 安装 Dash 首先，确保你...
【Dash搭建可视化网站】项目1：使用Dash创建简单网页
lys_828的博客
12-21 5076
项目1 ：使用Dash创建简单网页项目1 ：使用Dash创建简单网页1.1 官网示例1.2 绘制简单网页的基本步骤1.3 创建一个稍微有意思的页面 手动反爬虫，禁止转载：原博地址 https://blog.youkuaiyun.com/lys_828/article/details/122061934（优快云博主：Be_melting） 知识梳理不易，请尊重劳动成果，文章仅发布在优快云网站上，在其他网站看到该博文均属于未经作者授权的恶意爬取信息 项目1 ：使用Dash创建简单网页 1.1 官网示例 学习dash
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值