用Streamlit、Pandas与Plotly打造交互式数据可视化仪表盘：从零到一的实战教程

引言

当你将 Streamlit、Pandas 和 Plotly 的强大功能结合起来时，在 Python 中创建交互式网页数据仪表盘变得前所未有的简单。这三个库无缝协作，使静态数据集转化为响应式、视觉吸引力强的应用程序——而且无需具备网页开发背景。

但在开始之前，有一个重要的架构差异需要了解。与 matplotlib 或 seaborn 这类可以直接在 Jupyter notebook 中工作的库不同，Streamlit 创建的是独立的网页应用，必须从命令行运行。你需要在如 VS Code 这样的文本编辑器中编写代码，将其保存为 .py 文件，并通过 streamlit run filename.py 命令运行。相比于 notebook 环境，这种基于脚本的开发方式为你的数据应用程序的共享与部署打开了新的可能性。

在本实战教程中，你将分两步学会如何构建一个完整的销售仪表盘。我们将首先仅用 Streamlit 和 Pandas 搭建核心功能，然后再利用 Plotly 增强仪表盘的交互式可视化效果。

环境搭建

安装所需的包：

pip install streamlit pandas plotly

为你的项目创建一个新文件夹，并在 VS Code（或你喜欢的文本编辑器）中打开。

第一步：用 Streamlit + Pandas 构建基础仪表盘

让我们先用 Streamlit 和 Pandas 构建一个功能性的仪表盘。这将展示 Streamlit 如何创建交互式网页界面，以及 Pandas 如何处理数据筛选。

新建一个名为 step1_dashboard_basic.py 的文件，内容如下：

import streamlit as st
import pandas as pd
import numpy as np

# 页面配置
st.set_page_config(page_title='Basic Sales Dashboard', layout='wide')

# 生成示例数据
np.random.seed(42)
df = pd.DataFrame({
    'Date': pd.date_range('2024-01-01', periods=100),
    'Sales': np.random.randint(500, 2000, size=100),
    'Region': np.random.choice(['North', 'South', 'East', 'West'], size=100),
    'Product': np.random.choice(['Product A', 'Product B', 'Product C'], size=100)
})

# 侧边栏筛选器
st.sidebar.title('Filters')
regions = st.sidebar.multiselect('Select Region', df['Region'].unique(), default=df['Region'].unique())
products = st.sidebar.multiselect('Select Product', df['Product'].unique(), default=df['Product'].unique())

# 数据筛选
filtered_df = df[(df['Region'].isin(regions)) & (df['Product'].isin(products))]

# 展示指标
col1, col2, col3 = st.columns(3)
col1.metric("Total Sales", f"${filtered_df['Sales'].sum():,}")
col2.metric("Average Sales", f"${filtered_df['Sales'].mean():.0f}")
col3.metric("Records", len(filtered_df))

# 展示筛选后的数据
st.subheader("Filtered Data")
st.dataframe(filtered_df)

关键 Streamlit 方法解析

• st.set_page_config()：配置网页标签标题和布局
• st.sidebar：创建左侧导航栏用于筛选
• st.multiselect()：生成下拉多选菜单供用户选择
• st.columns()：创建并排布局区域
• st.metric()：以标签和大数字形式展示指标
• st.dataframe()：渲染交互式数据表格

上述方法会自动处理用户交互，并在筛选项更改时触发应用刷新。

在终端（或 VS Code 集成终端）中运行：

streamlit run step1_dashboard_basic.py

你的浏览器将打开 http://localhost:8501，显示一个交互式仪表盘。

如何结合 Streamlit、Pandas 和 Plotly 构建交互式数据应用

尝试更改侧边栏的过滤条件——你会看到指标和数据表会自动更新！这正是 Streamlit 的响应式特性与 Pandas 数据处理能力结合的体现。

第二步：引入 Plotly 实现交互式可视化

现在我们来为仪表盘添加 Plotly 的交互式图表，看看三大库如何完美协作。新建一个名为 step2_dashboard_plotly.py 的文件：

import streamlit as st
import pandas as pd
import plotly.express as px
import numpy as np

# 页面配置
st.set_page_config(page_title='Sales Dashboard with Plotly', layout='wide')

# 生成数据
np.random.seed(42)
df = pd.DataFrame({
    'Date': pd.date_range('2024-01-01', periods=100),
    'Sales': np.random.randint(500, 2000, size=100),
    'Region': np.random.choice(['North', 'South', 'East', 'West'], size=100),
    'Product': np.random.choice(['Product A', 'Product B', 'Product C'], size=100)
})

# 侧边栏筛选器
st.sidebar.title('Filters')
regions = st.sidebar.multiselect('Select Region', df['Region'].unique(), default=df['Region'].unique())
products = st.sidebar.multiselect('Select Product', df['Product'].unique(), default=df['Product'].unique())

# 数据筛选
filtered_df = df[(df['Region'].isin(regions)) & (df['Product'].isin(products))]

# 指标
col1, col2, col3 = st.columns(3)
col1.metric("Total Sales", f"${filtered_df['Sales'].sum():,}")
col2.metric("Average Sales", f"${filtered_df['Sales'].mean():.0f}")
col3.metric("Records", len(filtered_df))

# 图表
col1, col2 = st.columns(2)

with col1:
    fig_line = px.line(filtered_df, x='Date', y='Sales', color='Region', title='Sales Over Time')
    st.plotly_chart(fig_line, use_container_width=True)

with col2:
    region_sales = filtered_df.groupby('Region')['Sales'].sum().reset_index()
    fig_bar = px.bar(region_sales, x='Region', y='Sales', title='Total Sales by Region')
    st.plotly_chart(fig_bar, use_container_width=True)

# 数据表
st.subheader("Filtered Data")
st.dataframe(filtered_df)

在终端（或 VS Code 集成终端）中运行：

streamlit run step2_dashboard_plotly.py

现在你就拥有了一个完整的交互式仪表盘！

如何结合 Streamlit、Pandas 和 Plotly 构建交互式数据应用

Plotly 的图表是完全交互式的——你可以悬停查看数据点、缩放到特定时间段，甚至通过点击图例来显示/隐藏数据系列。

三大库如何协同工作

这种组合非常强大，因为每个库都专注于自己最擅长的部分：

Pandas 负责所有数据操作：

• 创建和加载数据集
• 根据用户选择过滤数据
• 为可视化做数据聚合
• 处理数据转换

Streamlit 提供网页界面：

• 创建交互式控件（多选、滑块等）
• 用户交互时自动重运行整个应用
• 处理响应式编程模型
• 使用列和容器管理页面布局

Plotly 创建丰富的交互式可视化：

• 支持悬停、缩放、探索的图表
• 极简代码实现专业外观图形
• 与 Streamlit 的响应性自动集成

核心开发流程

开发流程非常简单明了。首先在 VS Code 或任意文本编辑器中编写代码，并保存为 .py 文件。然后，在终端运行 streamlit run filename.py，仪表盘将在浏览器的 http://localhost:8501 打开。你每次编辑并保存代码后，Streamlit 都会自动检测变更并提示重运行应用。当你对仪表盘满意后，可以通过 Streamlit Community Cloud 部署，与他人共享。

下一步建议

尝试以下增强功能：

1. 添加真实数据：

# 用 CSV 上传替换示例数据
uploaded_file = st.sidebar.file_uploader("Upload CSV", type="csv")
if uploaded_file:
    df = pd.read_csv(uploaded_file)

请注意，真实数据集往往需要针对你的数据结构进行预处理。你需要调整列名、处理缺失值，并修改筛选条件以匹配实际数据字段。示例代码提供了模板，但每个数据集都需要独特的清洗与准备。

2. 更多图表类型：

# 产品分布的饼图
fig_pie = px.pie(filtered_df, values='Sales', names='Product', title='Sales by Product')
st.plotly_chart(fig_pie)

你可以充分利用 Plotly 图形库的全部强大功能。

仪表盘部署

当你的仪表盘在本地运行无误后，可以通过 Streamlit Community Cloud 轻松共享。首先，将代码推送到公开的 GitHub 仓库，并确保包含 requirements.txt 文件（列出 streamlit、pandas、plotly 依赖）。然后访问 https://streamlit.io/cloud，使用 GitHub 账号登录并选择你的仓库。Streamlit 会自动构建和部署你的应用，并提供一个任何人都能访问的公共链接。免费版支持多个应用，能应对适度流量，非常适合和同事共享或将其作为作品集展示。

总结

Streamlit、Pandas 与 Plotly 的组合，让数据分析从静态报告转变为交互式网页应用。仅需两个 Python 文件和几行代码，你就能打造媲美昂贵商业智能工具的完整仪表盘。

本教程展示了数据科学家分享工作的重大转变。你无需再发送静态图表或让同事运行 Jupyter notebook，而是可以直接创建任何人都能通过浏览器访问的网页应用。分析方式从 notebook 向脚本应用的转变，为数据专业人士让洞见更易用、更有影响力提供了新机遇。

随着你不断用这些工具进行开发，请思考如何用交互式仪表盘替代传统报告。这些原理完全适用于真实数据集、复杂计算和高级可视化。无论是创建高管仪表盘、探索性数据工具，还是面向客户的应用，这三大库的组合都是专业数据应用的坚实基础。