使用 Plotly Dash 构建功能强大的交互式数据仪表板：从入门到精通

在数据科学和可视化领域，交互式数据仪表板是一种强大的工具，可以帮助用户直观地理解数据并进行深入分析。Plotly Dash 是一个流行的Python框架，可以帮助你轻松构建交互式数据仪表板，无论是用于数据可视化、机器学习模型的展示还是其他数据驱动的应用程序。本文将介绍如何使用 Plotly Dash 创建一个简单但功能强大的交互式数据仪表板。

安装 Plotly Dash

首先，确保你已经安装了 Plotly Dash。你可以使用 pip 来安装：

登录后复制

pip install dash

• 1.

创建一个简单的仪表板

让我们从一个简单的例子开始，创建一个仪表板来展示一些基本的数据。我们将使用 Plotly 的图表库来绘制图表，并使用 Dash 来构建仪表板的布局。

登录后复制

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

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

# 构建应用的布局
app.layout = html.Div([
    html.H1("交互式数据仪表板"),
    dcc.Graph(id="scatter-plot"),
    html.Label("选择点的颜色："),
    dcc.Dropdown(
        id='color-dropdown',
        options=[
            {'label': '红色', 'value': 'red'},
            {'label': '绿色', 'value': 'green'},
            {'label': '蓝色', 'value': 'blue'}
        ],
        value='red'
    )
])

# 更新图表的回调函数
@app.callback(
    Output('scatter-plot', 'figure'),
    [Input('color-dropdown', 'value')]
)
def update_plot(selected_color):
    # 生成随机数据
    x_data = [1, 2, 3, 4, 5]
    y_data = [10, 11, 12, 13, 14]

    # 创建散点图
    trace = go.Scatter(
        x=x_data,
        y=y_data,
        mode='markers',
        marker=dict(color=selected_color, size=15),
    )

    # 设置图表布局
    layout = go.Layout(
        title='散点图',
        xaxis=dict(title='X 轴'),
        yaxis=dict(title='Y 轴'),
    )

    # 返回图表对象
    return {'data': [trace], 'layout': layout}

# 运行应用
if __name__ == '__main__':
    app.run_server(debug=True)

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.
• 36.
• 37.
• 38.
• 39.
• 40.
• 41.
• 42.
• 43.
• 44.
• 45.
• 46.
• 47.
• 48.
• 49.
• 50.
• 51.
• 52.
• 53.
• 54.
• 55.
• 56.

如何运行代码

1. 将以上代码保存到一个名为 app.py 的文件中。
2. 在命令行中运行 python app.py。
3. 打开浏览器并访问 http://127.0.0.1:8050/，你将看到一个简单的交互式数据仪表板。

添加更多交互功能

现在我们已经创建了一个简单的交互式数据仪表板，让我们进一步扩展它，添加更多的交互功能。

登录后复制

# 添加更多交互功能
html.Label("选择点的大小："),
dcc.Slider(
    id='size-slider',
    min=5,
    max=20,
    step=1,
    value=10,
    marks={i: str(i) for i in range(5, 21)}
)

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

我们添加了一个滑块组件，用于选择散点的大小，并相应地更新图表。现在，让我们更新回调函数，以便根据滑块的值更改散点的大小。

登录后复制

# 更新图表的回调函数
@app.callback(
    Output('scatter-plot', 'figure'),
    [Input('color-dropdown', 'value'),
     Input('size-slider', 'value')]
)
def update_plot(selected_color, selected_size):
    # 生成随机数据
    x_data = [1, 2, 3, 4, 5]
    y_data = [10, 11, 12, 13, 14]

    # 创建散点图
    trace = go.Scatter(
        x=x_data,
        y=y_data,
        mode='markers',
        marker=dict(color=selected_color, size=selected_size),
    )

    # 设置图表布局
    layout = go.Layout(
        title='散点图',
        xaxis=dict(title='X 轴'),
        yaxis=dict(title='Y 轴'),
    )

    # 返回图表对象
    return {'data': [trace], 'layout': layout}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.

运行代码

保存更新后的代码并重新运行 python app.py，然后在浏览器中刷新页面。现在你应该可以看到一个具有颜色和大小选择功能的交互式数据仪表板。

添加更多图表类型

除了散点图之外，Plotly Dash 还支持绘制各种其他类型的图表，如折线图、柱状图等。让我们添加一些额外的图表类型到我们的仪表板中。

登录后复制

# 添加更多图表类型
html.Label("选择图表类型："),
dcc.RadioItems(
    id='chart-type',
    options=[
        {'label': '散点图', 'value': 'scatter'},
        {'label': '折线图', 'value': 'line'},
        {'label': '柱状图', 'value': 'bar'}
    ],
    value='scatter'
)

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.

在布局中添加了一个单选框组件，用于选择要显示的图表类型。然后，我们需要更新回调函数，根据用户的选择绘制相应的图表。

登录后复制

# 更新图表的回调函数
@app.callback(
    Output('scatter-plot', 'figure'),
    [Input('color-dropdown', 'value'),
     Input('size-slider', 'value'),
     Input('chart-type', 'value')]
)
def update_plot(selected_color, selected_size, chart_type):
    # 生成随机数据
    x_data = [1, 2, 3, 4, 5]
    y_data = [10, 11, 12, 13, 14]

    # 根据图表类型创建对应的图表对象
    if chart_type == 'scatter':
        trace = go.Scatter(
            x=x_data,
            y=y_data,
            mode='markers',
            marker=dict(color=selected_color, size=selected_size),
        )
    elif chart_type == 'line':
        trace = go.Scatter(
            x=x_data,
            y=y_data,
            mode='lines',
            marker=dict(color=selected_color),
        )
    elif chart_type == 'bar':
        trace = go.Bar(
            x=x_data,
            y=y_data,
            marker=dict(color=selected_color),
        )

    # 设置图表布局
    layout = go.Layout(
        title=chart_type.capitalize() + '图',
        xaxis=dict(title='X 轴'),
        yaxis=dict(title='Y 轴'),
    )

    # 返回图表对象
    return {'data': [trace], 'layout': layout}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.
• 36.
• 37.
• 38.
• 39.
• 40.
• 41.
• 42.
• 43.

运行代码

保存更新后的代码并重新运行 python app.py，然后在浏览器中刷新页面。现在你应该可以在仪表板中选择不同的图表类型，并相应地查看数据的不同呈现方式。

添加更多数据

现在，让我们为我们的交互式数据仪表板添加更多的数据，以便用户可以选择不同的数据集进行可视化。

登录后复制

# 添加更多数据
html.Label("选择数据集："),
dcc.Dropdown(
    id='dataset-dropdown',
    options=[
        {'label': '数据集1', 'value': 'dataset1'},
        {'label': '数据集2', 'value': 'dataset2'},
        {'label': '数据集3', 'value': 'dataset3'}
    ],
    value='dataset1'
)

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.

我们添加了一个下拉菜单组件，用于选择要显示的数据集。然后，我们需要更新回调函数，根据用户选择的数据集加载相应的数据并绘制图表。

登录后复制

# 更新图表的回调函数
@app.callback(
    Output('scatter-plot', 'figure'),
    [Input('color-dropdown', 'value'),
     Input('size-slider', 'value'),
     Input('chart-type', 'value'),
     Input('dataset-dropdown', 'value')]
)
def update_plot(selected_color, selected_size, chart_type, selected_dataset):
    # 根据选择的数据集加载数据
    if selected_dataset == 'dataset1':
        x_data = [1, 2, 3, 4, 5]
        y_data = [10, 11, 12, 13, 14]
    elif selected_dataset == 'dataset2':
        x_data = [1, 2, 3, 4, 5]
        y_data = [5, 4, 3, 2, 1]
    elif selected_dataset == 'dataset3':
        x_data = [1, 2, 3, 4, 5]
        y_data = [8, 6, 7, 9, 10]

    # 根据图表类型创建对应的图表对象
    if chart_type == 'scatter':
        trace = go.Scatter(
            x=x_data,
            y=y_data,
            mode='markers',
            marker=dict(color=selected_color, size=selected_size),
        )
    elif chart_type == 'line':
        trace = go.Scatter(
            x=x_data,
            y=y_data,
            mode='lines',
            marker=dict(color=selected_color),
        )
    elif chart_type == 'bar':
        trace = go.Bar(
            x=x_data,
            y=y_data,
            marker=dict(color=selected_color),
        )

    # 设置图表布局
    layout = go.Layout(
        title=chart_type.capitalize() + '图',
        xaxis=dict(title='X 轴'),
        yaxis=dict(title='Y 轴'),
    )

    # 返回图表对象
    return {'data': [trace], 'layout': layout}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.
• 36.
• 37.
• 38.
• 39.
• 40.
• 41.
• 42.
• 43.
• 44.
• 45.
• 46.
• 47.
• 48.
• 49.
• 50.
• 51.

运行代码

保存更新后的代码并重新运行 python app.py，然后在浏览器中刷新页面。现在你应该可以在仪表板中选择不同的数据集，并查看不同数据集的可视化结果。

总结

总的来说，本文介绍了如何使用 Plotly Dash 构建交互式数据仪表板。我们从一个简单的例子开始，逐步扩展了仪表板的功能，包括添加颜色和大小选择功能、不同类型的图表选择功能以及多个数据集的选择功能。通过这些例子，读者可以学习如何使用 Dash 的核心组件和回调函数来构建自己的数据仪表板，并根据需要添加交互功能和多样化的数据可视化。

通过本文，读者可以了解到：

1. Plotly Dash 是一个强大的 Python 框架，可以帮助用户轻松构建交互式数据仪表板。
2. 使用 Dash 的核心组件和回调函数，可以实现各种交互功能，如颜色、大小和数据集的选择。
3. Plotly 提供了丰富的图表库，可以绘制各种类型的图表，包括散点图、折线图和柱状图等。
4. 通过将这些组件和功能结合起来，用户可以创建出灵活、功能丰富的交互式数据仪表板，用于数据可视化、数据分析和机器学习模型的展示等用途。

在数据科学和可视化领域，交互式数据仪表板是一种强大的工具，可以帮助用户直观地理解数据、发现数据中的模式和趋势，并进行深入的数据分析和探索。通过掌握 Plotly Dash，读者可以更加轻松地构建自己的数据仪表板，从而提升数据分析的效率和质量，为数据驱动的决策提供更加可靠的支持。

原创作者: u_16123336 转载于: https://blog.51cto.com/u_16123336/11449667