Plotly Dash：构建交互式 Web 仪表盘与数据应用

大家好！欢迎来到今天的“Plotly Dash：构建交互式 Web 仪表盘与数据应用”讲座。我是今天的讲师，大家可以叫我老码。今天咱们就来聊聊怎么用 Plotly Dash 这个神奇的工具，把你的数据变成炫酷的交互式 Web 仪表盘，让你的老板、同事、甚至你自己，都能对数据一目了然！

什么是 Plotly Dash？

简单来说，Plotly Dash 是一个 Python 库，它让你用 Python 代码就能轻松构建交互式的 Web 应用，尤其是数据可视化相关的应用。你不需要懂 HTML、CSS、JavaScript 这些前端技术，只要会 Python，就能搞定一个漂亮的仪表盘。是不是感觉瞬间轻松了许多？

为什么要用 Plotly Dash？

• Python 为王： 如果你已经是 Python 的忠实粉丝，或者你的数据分析工作主要用 Python 完成，那么 Dash 绝对是你的不二之选。你可以在一个语言环境中完成数据处理、可视化和 Web 应用构建，省时省力。
• 组件丰富： Dash 提供了各种各样的组件，包括图表、滑块、下拉菜单、文本框等等，几乎能满足你所有的数据可视化需求。
• 交互性强： Dash 应用天生就具有交互性。你可以通过用户的操作（比如点击图表、滑动滑块）来动态更新数据和图表，让用户深入探索数据。
• 部署方便： Dash 应用可以部署到各种平台上，比如本地服务器、云服务器、甚至 Docker 容器，方便分享给其他人使用。
• 开源免费： 重要的事情说三遍，开源免费！开源免费！开源免费！你可以免费使用 Dash 构建各种应用，无需担心授权费用。

准备工作：安装 Dash

在开始之前，我们需要安装 Dash 及其相关的库。打开你的终端，输入以下命令：

pip install dash
pip install dash-html-components
pip install dash-core-components
pip install plotly

• dash: Dash 的核心库。
• dash-html-components: 包含各种 HTML 组件，比如 div、h1、p 等。
• dash-core-components: 包含各种交互式组件，比如 Dropdown、Slider、Graph 等。
• plotly: 一个强大的绘图库，Dash 使用它来生成各种图表。

如果你的网络环境比较慢，可以考虑使用国内的镜像源，比如：

pip install dash -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install dash-html-components -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install dash-core-components -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install plotly -i https://pypi.tuna.tsinghua.edu.cn/simple

第一个 Dash 应用：Hello, World!

我们先来创建一个最简单的 Dash 应用，看看它长什么样。

import dash
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.H1(children='Hello, Dash!')
])

if __name__ == '__main__':
    app.run_server(debug=True)

这段代码做了什么？

1. 导入库： 导入 dash 和 dash_html_components 库。
2. 创建 Dash 应用： app = dash.Dash(__name__) 创建一个 Dash 应用实例。
3. 定义布局： app.layout 定义了应用的布局。这里我们使用 html.Div 创建一个容器，并在容器中添加一个 html.H1 标题。
4. 运行应用： app.run_server(debug=True) 启动 Dash 应用。debug=True 表示开启调试模式，方便开发过程中调试代码。

将这段代码保存为 app.py，然后在终端中运行它：

python app.py

你会看到类似这样的输出：

Dash is running on http://127.0.0.1:8050/

 * Serving Flask app 'app'
 * Debug mode: on

打开浏览器，访问 http://127.0.0.1:8050/，你就能看到一个简单的页面，上面写着 "Hello, Dash!"。恭喜你，你已经成功创建了你的第一个 Dash 应用！

添加交互性：一个简单的回调

光有静态页面可不行，我们要让它动起来！下面我们来添加一个简单的回调函数，让标题的内容随着输入框的内容而改变。

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Input(id='my-input', value='Initial Value', type='text'),
    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 'You entered: {}'.format(input_value)

if __name__ == '__main__':
    app.run_server(debug=True)

这段代码做了什么？

1. 导入 dcc 和 Input, Output： 导入 dash_core_components 库，它包含了 Input 组件。同时导入 Input 和 Output，它们用于定义回调函数的输入和输出。
2. 添加 Input 组件： dcc.Input 创建一个文本输入框，id 属性用于标识该组件，value 属性设置初始值，type 属性设置输入类型。
3. 添加 Output 组件： html.Div 创建一个空的 div 元素，id 属性用于标识该组件，我们将在这个 div 中显示输出结果。
4. 定义回调函数： @app.callback 装饰器定义一个回调函数，它会在 Input 组件的值发生改变时被调用。
   • Output(component_id='my-output', component_property='children') 指定回调函数的输出，component_id 指定输出组件的 ID，component_property 指定输出组件的属性。这里我们将 my-output 组件的 children 属性设置为回调函数的返回值。
   • [Input(component_id='my-input', component_property='value')] 指定回调函数的输入，component_id 指定输入组件的 ID，component_property 指定输入组件的属性。这里我们将 my-input 组件的 value 属性作为回调函数的输入。
5. update_output_div 函数： 这个函数接收一个参数 input_value，它就是 my-input 组件的 value 属性的值。函数返回一个字符串，这个字符串会被显示在 my-output 组件中。

将这段代码保存为 app.py，然后在终端中运行它：

python app.py

打开浏览器，访问 http://127.0.0.1:8050/，你会看到一个文本输入框和一个空的 div 元素。在输入框中输入任何内容，div 元素的内容会立即更新，显示你输入的内容。这就是一个简单的回调函数，它实现了输入和输出之间的联动。

更上一层楼：添加图表

光有文字可不行，我们要让数据可视化！下面我们来添加一个简单的折线图。

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go
import pandas as pd

app = dash.Dash(__name__)

# 生成一些示例数据
df = pd.DataFrame({
    'Fruit': ['Apples', 'Oranges', 'Bananas', 'Apples', 'Oranges', 'Bananas'],
    'Amount': [4, 1, 2, 2, 4, 5],
    'City': ['SF', 'SF', 'SF', 'Montreal', 'Montreal', 'Montreal']
})

# 创建图表
fig = go.Figure(data=[
    go.Bar(x=df[df['City'] == city]['Fruit'], y=df[df['City'] == city]['Amount'], name=city)
    for city in df['City'].unique()
])

app.layout = html.Div(children=[
    html.H1(children='Dash 示例图表'),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

这段代码做了什么？

1. 导入 plotly.graph_objects 和 pandas： 导入 plotly.graph_objects 库，它用于创建图表对象。同时导入 pandas 库，用于处理数据。
2. 生成示例数据： 使用 pandas.DataFrame 创建一个示例数据集，包含水果、数量和城市三个字段。
3. 创建图表： 使用 plotly.graph_objects.Figure 创建一个图表对象。
   • go.Bar 创建一个柱状图，x 属性指定 x 轴的数据，y 属性指定 y 轴的数据，name 属性指定图例的名称。
   • 我们使用列表推导式为每个城市创建一个柱状图，并将它们添加到图表对象中。
4. 添加 Graph 组件： dcc.Graph 创建一个图表组件，id 属性用于标识该组件，figure 属性指定要显示的图表对象。

将这段代码保存为 app.py，然后在终端中运行它：

python app.py

打开浏览器，访问 http://127.0.0.1:8050/，你会看到一个柱状图，显示了不同城市不同水果的数量。

让图表动起来：添加交互式组件

现在我们来添加一些交互式组件，让用户可以根据自己的需要来筛选数据和调整图表。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
import pandas as pd

app = dash.Dash(__name__)

# 生成一些示例数据
df = pd.DataFrame({
    'Fruit': ['Apples', 'Oranges', 'Bananas', 'Apples', 'Oranges', 'Bananas'],
    'Amount': [4, 1, 2, 2, 4, 5],
    'City': ['SF', 'SF', 'SF', 'Montreal', 'Montreal', 'Montreal']
})

app.layout = html.Div([
    html.H1(children='交互式 Dash 示例图表'),

    dcc.Dropdown(
        id='city-dropdown',
        options=[{'label': city, 'value': city} for city in df['City'].unique()],
        value=df['City'].unique(),
        multi=True
    ),

    dcc.Graph(id='example-graph')
])

@app.callback(
    Output('example-graph', 'figure'),
    [Input('city-dropdown', 'value')]
)
def update_graph(selected_cities):
    filtered_df = df[df['City'].isin(selected_cities)]

    fig = go.Figure(data=[
        go.Bar(x=filtered_df['Fruit'], y=filtered_df['Amount'], name=city)
        for city in filtered_df['City'].unique()
    ])

    fig.update_layout(barmode='group')

    return fig

if __name__ == '__main__':
    app.run_server(debug=True)

这段代码做了什么？

1. 添加 Dropdown 组件： dcc.Dropdown 创建一个下拉菜单，id 属性用于标识该组件。
   • options 属性指定下拉菜单的选项，我们使用列表推导式为每个城市创建一个选项。
     • label 属性指定选项的显示文本。
     • value 属性指定选项的值。
   • value 属性设置初始选中的选项，这里我们默认选中所有城市。
   • multi 属性设置为 True，表示可以选择多个选项。
2. 定义回调函数： @app.callback 装饰器定义一个回调函数，它会在 city-dropdown 组件的值发生改变时被调用。
   • Output('example-graph', 'figure') 指定回调函数的输出，我们将 example-graph 组件的 figure 属性设置为回调函数的返回值。
   • [Input('city-dropdown', 'value')] 指定回调函数的输入，我们将 city-dropdown 组件的 value 属性作为回调函数的输入。
3. update_graph 函数： 这个函数接收一个参数 selected_cities，它就是 city-dropdown 组件的 value 属性的值，也就是用户选中的城市列表。
   • filtered_df = df[df['City'].isin(selected_cities)] 根据用户选中的城市列表过滤数据。
   • fig = go.Figure(...) 创建一个图表对象，显示过滤后的数据。
   • fig.update_layout(barmode='group') 设置柱状图的显示模式为分组模式。

将这段代码保存为 app.py，然后在终端中运行它：

python app.py

打开浏览器，访问 http://127.0.0.1:8050/，你会看到一个下拉菜单和一个柱状图。你可以通过下拉菜单选择不同的城市，图表会根据你的选择动态更新。

更多组件和功能

Dash 提供了非常丰富的组件和功能，这里我们只介绍了几个最常用的。你可以通过查阅 Dash 的官方文档来了解更多内容：

• Dash Core Components (dcc): https://dash.plotly.com/dash-core-components
• Dash HTML Components (html): https://dash.plotly.com/dash-html-components
• Dash DataTable: https://dash.plotly.com/datatable

表格总结

组件类型	组件名称	功能描述
HTML 组件	html.Div	创建一个容器，用于组织其他组件。
HTML 组件	html.H1	创建一个标题。
HTML 组件	html.P	创建一个段落。
Core Components	dcc.Input	创建一个文本输入框。
Core Components	dcc.Dropdown	创建一个下拉菜单。
Core Components	dcc.Slider	创建一个滑块。
Core Components	dcc.Graph	创建一个图表。
其他	Input	用于定义回调函数的输入，指定输入组件的 ID 和属性。
其他	Output	用于定义回调函数的输出，指定输出组件的 ID 和属性。
Plotly Graph Object	go.Figure	创建一个图表对象，可以包含各种类型的图表，比如柱状图、折线图、散点图等。
Plotly Graph Object	go.Bar	创建一个柱状图。
Plotly Graph Object	go.Scatter	创建一个散点图或折线图。

一些小技巧

• 善用调试模式： 在开发过程中，始终开启 debug=True，这样可以方便你调试代码，快速发现错误。
• 模块化你的代码： 将你的代码分解成多个函数和模块，可以提高代码的可读性和可维护性。
• 使用 CSS 美化你的应用： 虽然 Dash 不需要你懂 HTML 和 JavaScript，但是如果你会一些 CSS，可以让你轻松美化你的应用。
• 参考官方文档和示例： Dash 的官方文档非常详细，包含了各种组件和功能的说明，以及大量的示例代码。

总结

今天我们学习了 Plotly Dash 的基本概念和使用方法，包括如何创建 Dash 应用、添加交互式组件和绘制图表。希望今天的讲座能帮助你入门 Dash，让你能够用 Python 轻松构建出炫酷的交互式 Web 仪表盘。

记住，学习编程是一个不断实践的过程。多写代码，多尝试不同的组件和功能，你就能逐渐掌握 Dash 的精髓，成为一个 Dash 大师！

最后，祝大家编程愉快！下课！