Streamlit数据可视化实战：图表与展示组件
项目地址: https://gitcode.com/gh_mirrors/st/streamlit 本文深入探讨了Streamlit中核心的数据展示与可视化组件，包括DataFrame和Table组件的功能对比、Matplotlib与Plotly的图表集成、交互式图表的事件处理机制，以及自定义样式与主题配置系统。文章通过丰富的代码示例和实战案例，详细讲解了各组件的使用方法、性能优化策略和最佳实践，帮助开发者构建高效、美观的数据可视化应用。
数据展示组件：DataFrame与Table
在Streamlit数据可视化生态中，DataFrame和Table是两个核心的数据展示组件，它们为开发者提供了强大而灵活的方式来呈现结构化数据。这两个组件虽然都用于展示表格数据，但在功能特性和使用场景上有着显著的区别。
DataFrame组件：交互式数据探索
DataFrame组件是Streamlit中最强大的数据展示工具之一，它不仅仅是一个静态表格，更是一个功能丰富的交互式数据探索界面。
基本用法与参数配置
import streamlit as st
import pandas as pd
import numpy as np
# 创建示例数据
data = pd.DataFrame({
'姓名': ['张三', '李四', '王五', '赵六'],
'年龄': [25, 30, 35, 28],
'薪资': [50000, 75000, 90000, 60000],
'部门': ['技术部', '市场部', '技术部', '人事部']
})
# 基本DataFrame展示
st.dataframe(data)
DataFrame组件支持丰富的参数配置：
| 参数 | 类型 | 说明 | 默认值 |
|---|---|---|---|
width | str/int | 宽度设置（'stretch'、'content'或像素值） | 'stretch' |
height | int/'auto' | 高度设置 | 'auto' |
use_container_width | bool | 是否使用容器宽度 | None |
hide_index | bool | 是否隐藏索引 | None |
column_order | list | 列显示顺序 | None |
column_config | dict | 列配置字典 | None |
key | str | 组件唯一标识 | None |
高级功能特性
列配置与自定义
# 高级列配置示例
st.dataframe(
data,
column_config={
"薪资": st.column_config.NumberColumn(
"年薪",
help="员工年度薪资",
format="$%d",
min_value=0,
max_value=200000,
step=1000,
),
"部门": st.column_config.SelectboxColumn(
"所属部门",
help="员工所在部门",
options=["技术部", "市场部", "人事部", "财务部"],
required=True,
),
"入职日期": st.column_config.DateColumn(
"入职时间",
min_value=date(2020, 1, 1),
),
},
hide_index=True,
)
交互式选择功能
# 启用行选择功能
selection = st.dataframe(
data,
key="employee_data",
on_select="rerun",
selection_mode=["multi-row"],
)
st.write("选中行:", selection.selection.rows)
Table组件：静态数据展示
Table组件提供了一个简单、静态的表格展示方式，适合需要快速查看数据而不需要交互功能的场景。
基本用法
# Table组件基本使用
st.table(data)
# 与DataFrame对比展示
col1, col2 = st.columns(2)
with col1:
st.write("DataFrame（交互式）")
st.dataframe(data.head())
with col2:
st.write("Table（静态）")
st.table(data.head())
性能优化场景
Table组件在处理大型数据集时具有性能优势，特别是在只需要静态展示的场景下：
# 大型数据集展示优化
large_data = pd.DataFrame(np.random.randn(1000, 5),
columns=['A', 'B', 'C', 'D', 'E'])
# 对于纯展示用途，Table更高效
st.table(large_data.head(10)) # 只显示前10行
功能对比分析
为了帮助开发者更好地选择适合的组件，以下是DataFrame和Table的功能对比：
详细功能对比表
| 特性 | DataFrame | Table |
|---|---|---|
| 交互性 | ✅ 支持排序、过滤、选择 | ❌ 静态展示 |
| 性能 | ⚡ 中等（支持虚拟滚动） | ⚡ 优秀（纯静态） |
| 配置灵活性 | ✅ 高度可配置 | ❌ 有限配置 |
| 选择功能 | ✅ 支持行列选择 | ❌ 不支持 |
| 主题支持 | ✅ 完整主题适配 | ✅ 基础主题适配 |
| 大数据集 | ✅ 支持分页和虚拟化 | ⚠️ 适合中小数据集 |
实战应用示例
企业员工数据看板
import streamlit as st
import pandas as pd
# 模拟企业数据
departments = ['技术部', '市场部', '人事部', '财务部', '运营部']
employees = []
for i in range(100):
employees.append({
'工号': f'E{i:04d}',
'姓名': f'员工{i}',
'部门': departments[i % len(departments)],
'薪资': 50000 + (i % 5) * 10000,
'绩效评分': round(3.0 + (i % 10) * 0.2, 1)
})
df = pd.DataFrame(employees)
# 创建交互式数据看板
st.title("企业员工数据管理看板")
# 部门筛选
selected_dept = st.selectbox("选择部门", ["全部"] + departments)
if selected_dept != "全部":
filtered_df = df[df['部门'] == selected_dept]
else:
filtered_df = df
# 使用DataFrame进行交互式展示
event = st.dataframe(
filtered_df,
column_config={
"薪资": st.column_config.ProgressColumn(
"薪资水平",
help="员工薪资分布",
format="$%d",
min_value=50000,
max_value=100000,
),
"绩效评分": st.column_config.NumberColumn(
"绩效",
help="员工绩效评分（1-5分）",
format="%.1f",
min_value=1.0,
max_value=5.0,
)
},
use_container_width=True,
hide_index=True,
key="employee_table"
)
# 显示选中数据
if hasattr(event, 'selection') and event.selection.rows:
selected_data = filtered_df.iloc[event.selection.rows]
st.write("选中员工详情:", selected_data)
数据对比分析场景
# 数据对比分析示例
def create_comparison_dashboard():
st.header("销售数据对比分析")
# 生成销售数据
sales_data = pd.DataFrame({
'月份': ['1月', '2月', '3月', '4月', '5月', '6月'],
'产品A': [120, 150, 180, 90, 210, 190],
'产品B': [80, 110, 95, 130, 170, 150],
'产品C': [200, 180, 220, 240, 190, 210]
})
# 计算统计信息
stats = sales_data.describe().loc[['mean', 'std', 'min', 'max']]
col1, col2 = st.columns(2)
with col1:
st.subheader("详细销售数据（交互式）")
st.dataframe(
sales_data,
column_config={
"月份": st.column_config.TextColumn("销售月份"),
"产品A": st.column_config.NumberColumn("产品A销量", format="%d 件"),
"产品B": st.column_config.NumberColumn("产品B销量", format="%d 件"),
"产品C": st.column_config.NumberColumn("产品C销量", format="%d 件"),
}
)
with col2:
st.subheader("统计摘要（静态展示）")
st.table(stats.round(2))
return sales_data, stats
sales_df, statistics = create_comparison_dashboard()
性能优化最佳实践
大数据集处理策略
# 大数据集优化示例
large_dataset = pd.DataFrame(np.random.randn(10000, 8),
columns=[f'Col_{i}' for i in range(8)])
# 策略1：分页显示
page_size = 100
total_pages = len(large_dataset) // page_size + 1
page_number = st.slider("选择页码", 1, total_pages, 1)
start_idx = (page_number - 1) * page_size
end_idx = min(start_idx + page_size, len(large_dataset))
st.dataframe(large_dataset.iloc[start_idx:end_idx])
# 策略2：采样显示
if st.checkbox("显示数据采样"):
sample_data = large_dataset.sample(1000) # 随机采样1000行
st.dataframe(sample_data)
内存管理技巧
# 内存优化示例
@st.cache_data
def load_large_data():
# 模拟加载大型数据集
return pd.DataFrame(np.random.randn(5000, 10))
def display_optimized_data():
data = load_large_data()
# 只加载需要的列
columns_to_show = st.multiselect(
"选择要显示的列",
options=data.columns.tolist(),
default=data.columns[:3].tolist()
)
if columns_to_show:
filtered_data = data[columns_to_show]
# 根据数据量选择展示方式
if len(filtered_data) > 1000:
st.info("数据量较大，建议使用分页功能")
st.dataframe(filtered_data.head(100)) # 只显示前100行
else:
st.dataframe(filtered_data)
display_optimized_data()
高级特性深度解析
自定义渲染与样式控制
DataFrame组件支持深度的自定义渲染能力，允许开发者通过列配置实现复杂的展示需求：
# 高级自定义渲染示例
custom_data = pd.DataFrame({
'项目': ['项目A', '项目B', '项目C', '项目D'],
'进度': [0.3, 0.8, 0.5, 0.9],
'状态': ['进行中', '已完成', '延期', '正常'],
'优先级': ['高', '中', '高', '低']
})
st.dataframe(
custom_data,
column_config={
"进度": st.column_config.ProgressColumn(
"完成进度",
help="项目完成百分比",
format="%.0f%%",
min_value=0,
max_value=1,
),
"状态": st.column_config.SelectboxColumn(
"项目状态",
options=["未开始", "进行中", "已完成", "延期"],
required=True,
),
"优先级": st.column_config.TextColumn(
"优先级别",
help="项目处理优先级",
)
},
hide_index=True,
use_container_width=True
)
实时数据更新模式
DataFrame组件支持实时数据更新，非常适合监控和实时数据展示场景：
# 实时数据更新示例
import time
placeholder = st.empty()
refresh_interval = st.slider("刷新间隔(秒)", 1, 10, 2)
for i in range(10):
# 生成实时数据
realtime_data = pd.DataFrame({
'时间': [pd.Timestamp.now()],
'CPU使用率': [np.random.randint(50, 95)],
'内存使用率': [np.random.randint(60, 90)],
'网络流量(MB)': [np.random.randint(100, 500)]
})
with placeholder.container():
st.metric("实时监控", f"第{i+1}次刷新")
st.dataframe(
realtime_data,
column_config={
"时间": st.column_config.DatetimeColumn("记录时间"),
"CPU使用率": st.column_config.ProgressColumn(format="%d%%"),
"内存使用率": st.column_config.ProgressColumn(format="%d%%"),
},
use_container_width=True
)
time.sleep(refresh_interval)
通过深入了解DataFrame和Table组件的特性和最佳实践，开发者可以根据具体需求选择最合适的数据展示方式，构建出既美观又高效的数据可视化应用。
图表组件：Matplotlib与Plotly集成
Streamlit为数据可视化提供了强大的图表组件支持，特别是对Matplotlib和Plotly这两个主流Python可视化库的无缝集成。通过st.pyplot()和st.plotly_chart()函数，开发者可以轻松地将复杂的可视化图表嵌入到交互式Web应用中。
Matplotlib集成深度解析
Matplotlib作为Python生态系统中最经典的可视化库，在Streamlit中通过st.pyplot()函数获得完美支持。该函数能够自动检测和渲染Matplotlib图形对象，提供灵活的布局配置选项。
基础使用方法
最基本的Matplotlib集成只需要几行代码：
import matplotlib.pyplot as plt
import numpy as np
import streamlit as st
# 创建示例数据
data = np.random.normal(0, 1, 1000)
# 创建图形和坐标轴
fig, ax = plt.subplots(figsize=(8, 6))
ax.hist(data, bins=30, alpha=0.7, color='steelblue')
ax.set_title('正态分布数据直方图')
ax.set_xlabel('数值')
ax.set_ylabel('频率')
# 在Streamlit中显示图表
st.pyplot(fig)
高级配置选项
Streamlit为Matplotlib图表提供了丰富的配置参数：
# 使用不同的宽度配置
st.pyplot(fig, width="stretch") # 拉伸至容器宽度
st.pyplot(fig, width="content") # 根据内容自适应
st.pyplot(fig, width=400) # 固定像素宽度
# 保存图像参数配置
st.pyplot(fig, dpi=150, bbox_inches="tight", format="png")
多子图支持
Matplotlib的多子图功能在Streamlit中完全兼容：
# 创建包含多个子图的图形
fig, axes = plt.subplots(2, 2, figsize=(10, 8))
# 在各个子图中绘制不同的图表
axes[0, 0].plot(np.random.randn(50))
axes[0, 0].set_title('折线图')
axes[0, 1].scatter(np.random.randn(100), np.random.randn(100))
axes[0, 1].set_title('散点图')
axes[1, 0].bar(['A', 'B', 'C', 'D'], [3, 7, 2, 5])
axes[1, 0].set_title('柱状图')
axes[1, 1].pie([30, 25, 15, 10, 20], labels=['A', 'B', 'C', 'D', 'E'])
axes[1, 1].set_title('饼图')
# 调整布局并显示
plt.tight_layout()
st.pyplot(fig)
Plotly集成全面指南
Plotly作为现代交互式可视化的首选库，在Streamlit中通过st.plotly_chart()函数提供强大的支持。该函数不仅支持基本的图表显示，还提供了丰富的交互功能和主题定制。
基础图表创建
import plotly.express as px
import plotly.graph_objects as go
import pandas as pd
import streamlit as st
# 使用Plotly Express创建图表
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length",
color="species", size="petal_length",
title="鸢尾花数据集散点图")
st.plotly_chart(fig, use_container_width=True)
交互功能配置
Plotly图表在Streamlit中支持完整的交互功能：
# 创建带有交互元素的图表
fig = go.Figure()
# 添加多个轨迹
fig.add_trace(go.Scatter(x=[1, 2, 3, 4], y=[10, 11, 12, 13],
mode='markers', name='标记'))
fig.add_trace(go.Scatter(x=[1, 2, 3, 4], y=[12, 13, 14, 15],
mode='lines', name='线条'))
# 配置布局和交互选项
fig.update_layout(
title='交互式多轨迹图表',
xaxis_title='X轴',
yaxis_title='Y轴',
hovermode='closest'
)
# 显示图表并启用容器宽度适配
st.plotly_chart(fig, use_container_width=True, theme="streamlit")
主题系统集成
Streamlit为Plotly提供了专门的主题系统：
# 使用Streamlit主题
st.plotly_chart(fig, theme="streamlit")
# 使用Plotly原生主题
st.plotly_chart(fig, theme=None)
# 自定义配置
st.plotly_chart(fig, config={
'displayModeBar': True,
'modeBarButtonsToRemove': ['lasso2d', 'select2d'],
'scrollZoom': True
})
高级功能与技巧
图表选择事件处理
Streamlit支持Plotly图表的选择事件，实现数据与用户交互的深度集成：
# 创建带有选择功能的图表
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length",
color="species", hover_data=["petal_width"])
# 启用选择功能
selection_event = st.plotly_chart(
fig,
key="iris_scatter",
on_select="rerun",
selection_mode=["points", "box", "lasso"]
)
# 处理选择结果
if selection_event.selection:
selected_points = selection_event.selection.points
st.write(f"选择了 {len(selected_points)} 个数据点")
for point in selected_points:
st.write(f"坐标: ({point['x']}, {point['y']})")
动态图表更新
结合Streamlit的缓存机制，实现高效的数据可视化更新：
from streamlit import cache_data
@cache_data
def create_plotly_chart(data_filter):
# 基于过滤条件创建图表
filtered_df = df[df['species'] == data_filter]
fig = px.scatter(filtered_df, x="sepal_width", y="sepal_length")
return fig
# 用户交互控制
selected_species = st.selectbox("选择物种", df['species'].unique())
chart = create_plotly_chart(selected_species)
st.plotly_chart(chart)
Matplotlib到Plotly的自动转换
Streamlit能够自动将Matplotlib图形转换为Plotly图表：
import matplotlib.pyplot as plt
import numpy as np
# 创建Matplotlib图形
fig, ax = plt.subplots()
x = np.linspace(0, 10, 100)
ax.plot(x, np.sin(x))
ax.set_title('正弦函数')
# 自动转换为Plotly并显示
st.plotly_chart(fig) # Streamlit自动处理转换
性能优化最佳实践
图表缓存策略
from streamlit import cache_resource
@cache_resource
def get_large_dataset():
# 模拟大型数据集加载
return pd.DataFrame(np.random.randn(10000, 5),
columns=['A', 'B', 'C', 'D', 'E'])
@cache_data
def create_optimized_chart():
df = get_large_dataset()
fig = px.scatter(df, x='A', y='B', opacity=0.1)
return fig
st.plotly_chart(create_optimized_chart())
响应式布局设计
实战案例：销售数据分析仪表板
import plotly.express as px
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd
import streamlit as st
# 创建示例销售数据
sales_data = pd.DataFrame({
'月份': ['1月', '2月', '3月', '4月', '5月', '6月'],
'销售额': [120, 150, 180, 90, 200, 160],
'利润': [40, 50, 60, 30, 70, 55],
'产品线': ['A', 'B', 'A', 'C', 'B', 'A']
})
# 创建多子图仪表板
fig = make_subplots(
rows=2, cols=2,
subplot_titles=('销售额趋势', '利润分析', '产品线分布', '销售额vs利润')
)
# 销售额折线图
fig.add_trace(
go.Scatter(x=sales_data['月份'], y=sales_data['销售额'], name='销售额'),
row=1, col=1
)
# 利润柱状图
fig.add_trace(
go.Bar(x=sales_data['月份'], y=sales_data['利润'], name='利润'),
row=1, col=2
)
# 产品线饼图
product_summary = sales_data.groupby('产品线')['销售额'].sum()
fig.add_trace(
go.Pie(labels=product_summary.index, values=product_summary.values),
row=2, col=1
)
# 散点图
fig.add_trace(
go.Scatter(x=sales_data['销售额'], y=sales_data['利润'],
mode='markers', name='相关性'),
row=2, col=2
)
# 更新布局
fig.update_layout(height=600, showlegend=False, title_text='销售数据分析仪表板')
st.plotly_chart(fig, use_container_width=True)
常见问题解决方案
Matplotlib后端配置
# 解决Matplotlib后端问题
import matplotlib
matplotlib.use('Agg') # 使用非交互式后端
import matplotlib.pyplot as plt
# 或者在~/.matplotlib/matplotlibrc中配置：
# backend: Agg
Plotly图表性能优化
# 对于大型数据集，使用优化技巧
fig = px.scatter(large_df, x='x_col', y='y_col', opacity=0.1)
fig.update_traces(marker={'size': 3}) # 减小标记大小
st.plotly_chart(fig, use_container_width=True)
主题一致性维护
# 确保Matplotlib和Plotly主题一致
plt.style.use('ggplot') # Matplotlib使用ggplot风格
# Plotly配置类似风格
fig.update_layout(
template='plotly_white',
font=dict(family="Arial", size=12)
)
通过深度集成Matplotlib和Plotly，Streamlit为数据科学家和分析师提供了强大的可视化工具链。无论是传统的静态图表还是现代的交互式可视化，都能在Streamlit应用中获得完美的展现效果和用户体验。
交互式图表与动态更新
Streamlit提供了强大的交互式图表功能，让用户能够通过点击、选择、悬停等操作与数据进行实时交互。这种交互性不仅提升了用户体验，还为数据分析提供了更直观的探索方式。
选择事件处理机制
Streamlit通过on_select参数实现了图表选择事件的监听和处理。当用户在图表上进行选择操作时，可以选择触发重新运行(rerun)或执行自定义回调函数。
基本选择事件配置
import streamlit as st
import altair as alt
import pandas as pd
from vega_datasets import data
# 创建选择器
point_selection = alt.selection_point()
# 构建图表
chart = (
alt.Chart(data.cars())
.mark_point()
.encode(
x="Horsepower:Q",
y="Miles_per_Gallon:Q",
color=alt.condition(point_selection, "Origin:N", alt.value("lightgray")),
)
.add_params(point_selection)
)
# 显示图表并监听选择事件
selection = st.altair_chart(
chart,
on_select="rerun",
key="car_selection",
use_container_width=True
)
# 处理选择结果
if selection and selection.selection:
st.write("选中的数据点:", selection.selection)
多种选择模式支持
Streamlit支持多种选择模式，包括点选择、区间选择、套索选择等，满足不同的交互需求。
点选择（Point Selection）
import altair as alt
point_select = alt.selection_point(name="point_select")
chart = (
alt.Chart(data)
.mark_circle()
.encode(
x="x_field:Q",
y="y_field:Q",
color=alt.condition(point_select, alt.value("red"), alt.value("gray")),
size=alt.condition(point_select, alt.value(100), alt.value(50))
)
.add_params(point_select)
)
区间选择（Interval Selection）
interval_select = alt.selection_interval(name="interval_select")
chart = (
alt.Chart(data)
.mark_rect()
.encode(
x="x_field:Q",
y="y_field:Q",
color=alt.condition(interval_select, "value:Q", alt.value("lightgray")),
)
.add_params(interval_select)
)
动态数据更新机制
Streamlit的响应式架构使得图表能够根据用户交互实时更新，实现真正的动态数据可视化。
实时数据过滤
import pandas as pd
import numpy as np
# 生成示例数据
np.random.seed(42)
data = pd.DataFrame({
'x': np.random.randn(100),
'y': np.random.randn(100),
'category': np.random.choice(['A', 'B', 'C'], 100)
})
# 创建交互式散点图
selection = alt.selection_point()
chart = (
alt.Chart(data)
.mark_point()
.encode(
x='x:Q',
y='y:Q',
color=alt.condition(selection, 'category:N', alt.value('lightgray')),
tooltip=['x', 'y', 'category']
)
.add_params(selection)
)
# 显示图表
event = st.altair_chart(chart, on_select="rerun", key="scatter_filter")
# 根据选择过滤数据
if event and event.selection:
selected_points = event.selection.get('point_select', {})
if selected_points:
# 在实际应用中，这里可以根据选择条件过滤数据
filtered_data = data # 这里简化处理
st.write(f"选中了 {len(selected_points)} 个数据点")
st.dataframe(filtered_data)
回调函数处理
除了简单的重新运行，Streamlit还支持自定义回调函数来处理选择事件，实现更复杂的交互逻辑。
自定义选择回调
def handle_selection():
"""处理图表选择事件的回调函数"""
if 'chart_selection' in st.session_state:
selection_data = st.session_state.chart_selection
st.write("选择回调触发!")
st.json(selection_data)
# 创建图表并绑定回调
selection_chart = (
alt.Chart(data)
.mark_bar()
.encode(
x='category:N',
y='count():Q',
color=alt.condition(
alt.selection_point(),
alt.value('steelblue'),
alt.value('lightgray')
)
)
.add_params(alt.selection_point())
)
st.altair_chart(
selection_chart,
on_select=handle_selection,
key="chart_selection"
)
多图表联动
Streamlit支持多个图表之间的联动，实现复杂的数据探索场景。
图表联动示例
# 主图表 - 散点图
main_selection = alt.selection_point()
main_chart = (
alt.Chart(data)
.mark_point()
.encode(
x='x:Q',
y='y:Q',
color=alt.condition(main_selection, 'category:N', alt.value('lightgray'))
)
.add_params(main_selection)
)
# 副图表 - 柱状图（显示筛选后的统计）
detail_chart = (
alt.Chart(data)
.transform_filter(main_selection) # 根据主图表选择过滤数据
.mark_bar()
.encode(
x='category:N',
y='count():Q',
color='category:N'
)
)
# 显示联动图表
col1, col2 = st.columns(2)
with col1:
st.altair_chart(main_chart, on_select="rerun", key="main_chart")
with col2:
st.altair_chart(detail_chart, use_container_width=True)
高级交互特性
Streamlit还提供了更多高级的交互特性，满足专业数据可视化需求。
工具提示和悬停效果
# 增强型工具提示
enhanced_chart = (
alt.Chart(data)
.mark_circle()
.encode(
x='x:Q',
y='y:Q',
color='category:N',
size=alt.value(60),
tooltip=[
alt.Tooltip('x:Q', title='X值', format='.2f'),
alt.Tooltip('y:Q', title='Y值', format='.2f'),
alt.Tooltip('category:N', title='类别')
]
)
.interactive() # 启用缩放和平移交互
)
st.altair_chart(enhanced_chart, use_container_width=True)
选择状态持久化
# 使用session state保持选择状态
if 'chart_selection_state' not in st.session_state:
st.session_state.chart_selection_state = {}
selection = alt.selection_point()
chart = (
alt.Chart(data)
.mark_point()
.encode(
x='x:Q',
y='y:Q',
color=alt.condition(selection, alt.value('red'), alt.value('blue'))
)
.add_params(selection)
)
# 显示图表并处理选择
event = st.altair_chart(chart, on_select="rerun", key="persistent_chart")
# 保存选择状态
if event and event.selection:
st.session_state.chart_selection_state = event.selection
st.write("选择已保存到session state")
性能优化技巧
对于大型数据集，可以采用以下优化策略：
# 数据采样和聚合
@st.cache_data
def get_aggregated_data():
"""获取聚合后的数据以提高性能"""
return data.sample(1000) # 对大数据集进行采样
sampled_data = get_aggregated_data()
# 使用简化图表
optimized_chart = (
alt.Chart(sampled_data)
.mark_circle(size=20) # 减小点大小
.encode(
x=alt.X('x:Q', bin=alt.Bin(maxbins=50)), # 分箱处理
y=alt.Y('y:Q', bin=alt.Bin(maxbins=50)),
color='category:N'
)
)
st.altair_chart(optimized_chart, use_container_width=True)
交互流程图
以下是Streamlit交互式图表的事件处理流程图：
最佳实践表格
| 场景 | 推荐配置 | 注意事项 |
|---|---|---|
| 简单点选 | on_select="rerun" | 适合快速原型开发 |
| 复杂交互 | 自定义回调函数 | 需要处理session state |
| 大数据集 | 数据采样 + 分箱 | 提高渲染性能 |
| 多图表联动 | 共享选择器 | 保持状态一致性 |
| 生产环境 | 错误处理 + 加载状态 | 提升用户体验 |
通过上述技术和最佳实践，开发者可以创建出功能丰富、响应迅速的交互式数据可视化应用，为用户提供卓越的数据探索体验。
自定义样式与主题配置
Streamlit提供了强大的主题定制功能，允许开发者通过配置文件或代码方式完全自定义应用程序的外观和风格。主题系统支持从基础颜色到字体、边框、图表颜色等全方位的样式配置，让您能够创建具有品牌特色的数据可视化应用。
主题配置基础
Streamlit的主题配置主要通过config.toml文件实现，该文件位于用户主目录的.streamlit文件夹中。主题配置分为主主题和侧边栏主题两个部分，每个部分都支持相同的配置选项。
配置结构示例
[theme]
base = "light" # 或 "dark"
primaryColor = "#FF4B4B"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F0F2F6"
textColor = "#31333F"
[theme.sidebar]
primaryColor = "#FF4B4B"
backgroundColor = "#F0F2F6"
颜色系统配置
Streamlit的主题颜色系统包含多个层次的色彩配置，支持完整的视觉层次结构：
| 配置选项 | 描述 | 默认值（浅色主题） | 默认值（深色主题） |
|---|---|---|---|
primaryColor | 主要强调色 | #FF4B4B | #FF4B4B |
backgroundColor | 应用背景色 | #FFFFFF | #0E1117 |
secondaryBackgroundColor | 小组件背景色 | #F0F2F6 | #262730 |
textColor | 主要文本颜色 | #31333F | #FAFAFA |
borderColor | 边框颜色 | 自动计算 | 自动计算 |
颜色配置示例
[theme]
base = "dark"
primaryColor = "#1BD760" # 绿色强调色
backgroundColor = "#001200" # 深绿色背景
secondaryBackgroundColor = "#021A09" # 次级背景
textColor = "#DFFDE0" # 浅绿色文本
borderColor = "#0B4C0B" # 边框颜色
字体系统定制
Streamlit支持完整的字体系统配置，包括字体家族、大小、权重等多个维度：
字体配置示例
[theme]
font = "Inter, sans-serif"
baseFontSize = 16
baseFontWeight = 400
headingFont = "Inter, sans-serif"
headingFontSizes = ["2.75rem", "2.25rem", "1.75rem", "1.5rem", "1.25rem", "1rem"]
headingFontWeights = [700, 600, 600, 600, 600, 600]
codeFont = "Monaspace Argon, monospace"
codeFontSize = "0.875rem"
codeFontWeight = 400
# 自定义字体嵌入
[[theme.fontFaces]]
family = "CustomFont"
url = "app/static/fonts/custom.woff2"
weight = "400"
style = "normal"
边框与圆角配置
Streamlit提供了灵活的边框和圆角配置系统，支持统一的视觉语言：
[theme]
baseRadius = "medium" # 基础圆角: none/small/medium/large/full
buttonRadius = "medium" # 按钮圆角
showWidgetBorder = true # 显示小组件边框
showSidebarBorder = true # 显示侧边栏分隔线
[theme.sidebar]
baseRadius = "small" # 侧边栏独立配置
buttonRadius = "small"
图表颜色配置
对于数据可视化，Streamlit允许自定义图表的颜色方案：
[theme]
# 分类颜色（用于离散数据）
chartCategoricalColors = [
"#0068c9", "#83c9ff", "#ff2b2b", "#ffabab",
"#29b09d", "#7defa1", "#ff8700", "#ffd16a"
]
# 顺序颜色（用于连续数据）
chartSequentialColors = [
"#0068c9", "#83c9ff", "#ff2b2b", "#ffabab"
]
高级主题配置技巧
1. 动态主题检测
在应用中可以通过st.context.theme检测当前主题类型：
import streamlit as st
theme_type = st.context.theme.type
if theme_type == "dark":
st.write("当前使用深色主题")
else:
st.write("当前使用浅色主题")
2. CSS自定义样式
除了主题配置，还可以通过CSS进一步定制样式：
st.markdown("""
<style>
/* 自定义CSS样式 */
.custom-widget {
border: 2px solid #FF4B4B;
border-radius: 10px;
padding: 10px;
}
</style>
""", unsafe_allow_html=True)
3. 响应式主题配置
创建响应不同主题的组件：
def themed_component():
theme = st.context.theme.type
bg_color = "#FFFFFF" if theme == "light" else "#0E1117"
text_color = "#31333F" if theme == "light" else "#FAFAFA"
st.markdown(f"""
<div style="background-color: {bg_color}; color: {text_color}; padding: 20px; border-radius: 10px;">
<h3>响应式主题组件</h3>
<p>根据当前主题自动调整样式</p>
</div>
""", unsafe_allow_html=True)
主题配置最佳实践
- 保持一致性：确保主题配置在整个应用中保持一致的设计语言
- 对比度检查：确保文本颜色和背景颜色有足够的对比度
- 渐进增强：先从基础颜色配置开始，逐步添加更复杂的样式
- 测试多主题：在浅色和深色主题下都测试样式效果
- 性能考虑：自定义字体文件较大时，考虑使用系统字体作为fallback
完整的主题配置示例
# ~/.streamlit/config.toml
[theme]
base = "light"
primaryColor = "#1E88E5"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F5F5F5"
textColor = "#333333"
font = "Inter, sans-serif"
baseFontSize = 16
baseFontWeight = 400
headingFont = "Inter, sans-serif"
headingFontSizes = ["2.5rem", "2rem", "1.5rem", "1.25rem", "1.1rem", "1rem"]
headingFontWeights = [700, 600, 600, 500, 500, 500]
baseRadius = "8px"
buttonRadius = "8px"
showWidgetBorder = true
showSidebarBorder = true
[theme.sidebar]
primaryColor = "#1E88E5"
backgroundColor = "#F5F5F5"
textColor = "#333333"
baseRadius = "6px"
buttonRadius = "6px"
# 自定义字体
[[theme.fontFaces]]
family = "Inter"
url = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
通过Streamlit强大的主题配置系统，您可以创建出既美观又符合品牌形象的数据可视化应用，为用户提供卓越的视觉体验。
总结
通过本文的全面介绍，我们深入了解了Streamlit在数据可视化方面的强大能力。从基础的数据展示组件DataFrame和Table，到高级的Matplotlib和Plotly图表集成，再到交互式图表的动态更新和自定义主题配置，Streamlit提供了一整套完整的数据可视化解决方案。掌握这些组件和技巧，开发者能够创建出既功能丰富又视觉出色的数据应用，为用户提供卓越的数据探索和分析体验。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
