如何在Streamlit中借助src工具复现截图中的折线图？

问题描述 #

我已导入以下模块：

import src.tools
import src.assets

但不熟悉如何在Streamlit中使用src.tools，希望创建出类似指定折线图（数据为对应截图中的第一张图）的可视化效果，请问该编写怎样的代码？

实现步骤与代码示例 #

1. 先确认src.tools的绘图能力 #

首先需要明确src.tools中是否封装了折线图相关函数，可通过以下代码查看模块内容：

import src.tools
print(dir(src.tools))

如果输出结果中有line_chart、plot_line这类命名的函数，可直接调用；若没有，则结合Streamlit原生组件或matplotlib/plotly实现。

2. 模拟截图中的数据结构 #

假设截图中第一张图为日期作为横轴，多组数值作为纵轴的趋势图，先构造示例数据（可根据实际数据调整）：

import pandas as pd
import streamlit as st

# 模拟数据，与截图结构匹配
data = pd.DataFrame({
    "日期": ["2024-01-01", "2024-01-02", "2024-01-03", "2024-01-04", "2024-01-05"],
    "系列1": [12, 15, 13, 17, 14],
    "系列2": [8, 10, 9, 12, 11],
    "系列3": [5, 7, 6, 8, 7]
}).set_index("日期")
# 建议将日期转为datetime类型，优化横轴显示
data.index = pd.to_datetime(data.index)

3. 结合src.tools实现折线图 #

情况1：src.tools有现成折线图函数

如果src.tools中封装了绘图函数（比如create_line_chart），直接调用并在Streamlit中展示：

# 调用src.tools的绘图函数，传入数据与配置参数
fig = src.tools.create_line_chart(
    data, 
    x_label="日期", 
    y_label="数值", 
    title="趋势折线图"
)
# 根据图表类型选择展示方法：matplotlib图用st.pyplot，plotly图用st.plotly_chart
st.pyplot(fig)

情况2：src.tools无现成绘图函数，用Streamlit原生方法

如果src.tools未封装绘图逻辑，直接用Streamlit内置组件或自定义样式：

# 方法1：Streamlit原生折线图，快速实现
st.line_chart(data, use_container_width=True)

# 方法2：用matplotlib自定义样式（更贴近截图效果）
import matplotlib.pyplot as plt

fig, ax = plt.subplots()
# 绘制多系列折线，添加标记点
ax.plot(data.index, data["系列1"], marker='o', label='系列1')
ax.plot(data.index, data["系列2"], marker='s', label='系列2')
ax.plot(data.index, data["系列3"], marker='^', label='系列3')
# 配置图表样式
ax.set_xlabel("日期")
ax.set_ylabel("数值")
ax.set_title("趋势折线图")
ax.legend()
ax.grid(True)

st.pyplot(fig)

4. 结合src.assets优化样式 #

如果src.assets包含预设的图表样式（比如配色、字体），可导入后应用：

from src.assets import chart_styles
# 应用预设配色
ax.set_prop_cycle(color=chart_styles.line_colors)

内容的提问来源于stack exchange，提问作者Ralph