1 前言

欢迎来到我的博客！😊今天我将向大家介绍 Streamlit 中一系列令人惊叹的数据元素！🚀如果你是一个数据分析师、机器学习工程师或者只是对数据处理和可视化感兴趣的朋友，那么你来对地方了！在这篇博客中，我们将探索 Streamlit 为我们提供的一些核心组件，包括 st.dataframe、st.data_editor、st.column_config、st.table、st.metric 和 st.json。准备好了吗？我们马上就要起航啦！⛵️

Streamlit 作为一个基于 Python 的开源框架，旨在使数据科学家和开发者能够快速简单地构建数据驱动的应用程序。它不仅仅是一个强大的工具，还是一个友好的社区，致力于提供用于构建令人惊叹的数据可视化应用程序的解决方案。在本文中，我们将重点关注 Streamlit 提供的一些核心数据元素，它们将帮助我们更好地理解和展示数据。无论你是需要展示一个数据表格、调整数据编辑器、创建指标度量，还是展示 JSON 数据，Streamlit 都为你提供了简单又强大的工具。

让我们一起探索这些令人兴奋的数据元素，看看它们如何帮助我们轻松地打造出美观、交互性强的数据应用程序。准备好了吗？让我们开始吧！🎉

2 解锁 Streamlit 中的 st.dataframe 功能

st.dataframe 是 Streamlit 提供的一个功能强大的组件，它允许我们以易读且美观的方式展示数据框（Dataframe）。无论是处理小型数据集还是庞大的数据表，st.dataframe 都能让数据的展示变得轻而易举。它能够自动适应屏幕宽度，使得数据在任何设备上都能得到清晰的展示。不仅如此，st.dataframe 还支持水平或垂直滚动，确保你能方便地浏览整个数据集。👀

让我们来看一个示例，以便更好地理解 st.dataframe 的用法和效果。下面是一个简单的代码段：

import streamlit as st
import pandas as pd
import numpy as np
df = pd.DataFrame(
   np.random.randn(50, 20),
   columns=('col %d' % i for i in range(20)))
st.dataframe(df)  # Same as st.write(df)

上述示例中，我们使用了 pd.DataFrame 和 np.random.randn 创建了一个随机的数据框 df，然后通过 st.dataframe(df) 将数据呈现在界面上。这一行代码等同于 st.write(df)，可以看到结果非常简单而直观。😃

st.dataframe 不仅提供了基本的数据展示功能，还支持对数据进行排序、筛选和搜索等操作。

我们已经介绍了如何使用 st.dataframe 来展示普通的数据框。现在，让我们将 st.dataframe 的功能提升到一个全新的水平！你知道吗？你甚至可以使用 Pandas Styler 对象来改变呈现的数据框的样式。这是不是很酷？😎

让我们来看一个示例，展示了如何使用 Pandas Styler 对象来改变数据框 df 的样式：

import streamlit as st
import pandas as pd
import numpy as np
df = pd.DataFrame(
   np.random.randn(10, 20),
   columns=('col %d' % i for i in range(20)))
st.dataframe(df.style.highlight_max(axis=0))

上述示例中，我们使用 np.random.randn 创建了一个 10 行 20 列的数据框 df，然后使用 df.style.highlight_max(axis=0) 方法来对数据框的最大值进行突出显示。通过将 Styler 对象传递给 st.dataframe，我们可以以更加引人注目的方式展示数据。这在数据分析和可视化中非常有用，尤其是当你想要突出显示一些重要的数据特征时。😲

除了 highlight_max，Pandas Styler 还提供了其他许多内置的样式方法，如 highlight_min、background_gradient 等等。你可以根据需要选择适合你数据框的样式效果。

通过将 st.dataframe 与 Pandas Styler 结合使用，你可以轻松地打造出具有个性化视觉效果的数据展示。这样，不仅可以提高数据的可读性，还能够让你的数据应用程序更加引人注目和专业。🤩

我们已经了解到如何使用 Pandas Styler 对象来改变数据框的样式。现在，让我们继续探索 st.dataframe 的更多高级用法！你知道吗？你还可以通过 column_config、hide_index 或 column_order 来自定义展示的数据框。这样，你可以根据自己的需求定制数据框的表现形式。让我们来看一个示例：

import random
import pandas as pd
import streamlit as st
df = pd.DataFrame(
    {
        "name": ["Roadmap", "Extras", "Issues"],
        "url": ["https://roadmap.streamlit.app", "https://extras.streamlit.app", "https://issues.streamlit.app"],
        "stars": [random.randint(0, 1000) for _ in range(3)],
        "views_history": [[random.randint(0, 5000) for _ in range(30)] for _ in range(3)],
    }
)
st.dataframe(
    df,
    column_config={
        "name": "App name",
        "stars": st.column_config.NumberColumn(
            "Github Stars",
            help="Number of stars on GitHub",
            format="%d ⭐",
        ),
        "url": st.column_config.LinkColumn("App URL"),
        "views_history": st.column_config.LineChartColumn(
            "Views (past 30 days)", y_min=0, y_max=5000
        ),
    },
    hide_index=True,
)

上述示例中，我们使用了一个简单的数据框 df，其中包含了应用的名称、URL、GitHub 的星数以及过去 30 天的访问历史。通过传递 column_config 参数，我们可以自定义每列的显示方式。在示例代码中，我们定义了以下配置：

“name” 列被重命名为 “App name”；

“stars” 列被定义成了一个 st.column_config.NumberColumn 对象，可以显示带有 GitHub

星数的标题，并指定了格式为整数 “%d ⭐”；

“url” 列被定义成了一个 st.column_config.LinkColumn 对象，将单元格的内容作为链接展示；

“views_history” 列被定义成了一个 st.column_config.LineChartColumn

对象，生成了一个折线图，显示过去 30 天的访问历史，并指定了 Y 轴的最小值和最大值。

另外，我们还设置了 hide_index=True，将索引隐藏起来。

通过使用 column_config、hide_index 和 column_order，我们可以根据自己的需求灵活地定制数据框的展示方式，使得数据的表达更加清晰和有针对性。

我们已经介绍了如何使用 st.dataframe 来展示数据框。现在，让我们进一步探索 st.dataframe 的功能！你知道吗？你可以使用 use_container_width 参数来让数据框自动适应容器的宽度。这非常有用，特别是当你希望以更大的尺寸展示数据框时。让我们来看一个示例：

import pandas as pd
import streamlit as st
# 使用缓存加载数据框，这样只会加载一次
@st.cache_data
def load_data():
    return pd.DataFrame(
        {
            "第一列": [1, 2, 3, 4],
            "第二列": [10, 20, 30, 40],
        }
    )
# 使用会话状态变量存储用于调整数据框尺寸的布尔值
st.checkbox("使用容器宽度", value=False, key="use_container_width")
df = load_data()
# 根据复选框的值，显示数据框并允许用户根据容器宽度调整数据框尺寸
st.dataframe(df, use_container_width=st.session_state.use_container_width)

上述示例中，我们首先定义了一个加载数据的函数 load_data，并使用 @st.cache_data 装饰器缓存数据框，以便只加载一次。

然后，我们通过使用 st.checkbox 创建一个复选框来控制是否使用容器的宽度来展示数据框。复选框的初始值被设置为 False。

接下来，我们调用 load_data 函数加载数据框 df。

最后，我们使用 st.dataframe 来展示数据框，并通过将 use_container_width 参数设置为 st.session_state.use_container_width 来根据复选框的值来调整数据框的尺寸。如果复选框选中，数据框将会完全展开，适应容器的宽度；如果复选框未选中，数据框将以默认宽度展示。

通过使用 use_container_width，你可以轻松地将数据框的宽度调整为适合当前容器的大小，提供更好的可视化效果。

3 使用st.data_editor进行数据编辑

在这一章中，我们将介绍 Streamlit 提供的一个强大工具 - st.data_editor，它可以让你直接在 Streamlit 应用中编辑数据。通过使用 st.data_editor，你可以轻松地修改和更新数据并实时查看结果。

st.data_editor 是 Streamlit 中的一个函数，它允许你以交互的方式编辑数据框。当你在应用中使用 st.data_editor 时，会出现一个可编辑的表格，你可以直接在其中修改数据，而无需编写任何代码。

使用 st.data_editor 有几个主要的作用：

数据修改和更新：你可以直接在 st.data_editor 提供的编辑器中修改和更新数据，比如增加、删除或修改行和列的值。

实时反馈：修改数据之后，st.data_editor 会实时更新，并将更改后的数据显示出来，让你可以即时查看操作的结果。

交互性和易用性：通过简单的交互操作，你可以直观地对数据进行编辑，而无需编写复杂的代码。

下面是一个示例，展示如何使用 st.data_editor 编辑数据框：

import streamlit as st
import pandas as pd
df = pd.DataFrame(
    [
       {"command": "st.selectbox", "rating": 4, "is_widget": True},
       {"command": "st.balloons", "rating": 5, "is_widget": False},
       {"command": "st.time_input", "rating": 3, "is_widget": True},
   ]
)
edited_df = st.data_editor(df)
favorite_command = edited_df.loc[edited_df["rating"].idxmax()]["command"]
st.markdown(f"Your favorite command is **{favorite_command}** 🎈")

在上述示例中，我们首先创建了一个简单的数据框 df，包含了不同命令、评分和小部件信息。然后，我们使用 st.data_editor 来编辑这个数据框，并将结果存储在 edited_df 中。

接着，我们将使用编辑后的数据框 edited_df，找到评分最高的命令，并输出该命令。

通过这个示例，你可以看到 st.data_editor 的交互性和便利之处。你只需要调用函数，即可获得一个可编辑的表格，并可以直接在表格中进行数据修改。

另外，你还可以通过将 num_rows 设置为 “dynamic”，让用户添加和删除行：

import streamlit as st
import pandas as pd
df = pd.DataFrame(
    [
       {"command": "st.selectbox", "rating": 4, "is_widget": True},
       {"command": "st.balloons", "rating": 5, "is_widget": False},
       {"command": "st.time_input", "rating": 3, "is_widget": True},
   ]
)
edited_df = st.data_editor(df, num_rows="dynamic")
favorite_command = edited_df.loc[edited_df["rating"].idxmax()]["command"]
st.markdown(f"Your favorite command is **{favorite_command}** 🎈")

在上述示例中，我们创建了一个名为 df 的数据框。然后，我们使用 st.data_editor 通过将 num_rows 参数设置为 “dynamic” 来展示可编辑的数据框。这样，用户可以添加和删除行，以适应他们的需求。

最后，我们使用编辑后的数据框 edited_df 找到评分最高的命令，并输出该命令。

通过使用 num_rows=“dynamic”，你可以将行的数量设置为动态的，并允许用户在编辑器中动态地添加和删除行。这为用户提供了更大的灵活性，并且可以轻松地根据需要调整数据表的大小。

另外，你还可以通过使用 column_config、hide_index、column_order 或 disabled 来自定义数据编辑器：

import pandas as pd
import streamlit as st
df = pd.DataFrame(
    [
        {"command": "st.selectbox", "rating": 4, "is_widget": True},
        {"command": "st.balloons", "rating": 5, "is_widget": False},
        {"command": "st.time_input", "rating": 3, "is_widget": True},
    ]
)
edited_df = st.data_editor(
    df,
    column_config={
        "command": "Streamlit Command",
        "rating": st.column_config.NumberColumn(
            "Your rating",
            help="How much do you like this command (1-5)?",
            min_value=1,
            max_value=5,
            step=1,
            format="%d ⭐",
        ),
        "is_widget": "Widget ?",
    },
    disabled=["command", "is_widget"],
    hide_index=True,
)
favorite_command = edited_df.loc[edited_df["rating"].idxmax()]["command"]
st.markdown(f"Your favorite command is **{favorite_command}** 🎈")

在上述示例中，我们首先创建了一个名为 df 的数据框。然后，我们使用 st.data_editor 来展示可编辑的数据框，并通过以下方式进行自定义：

column_config：通过指定新的列名和自定义控件的方式，我们将 “command” 列的名称改为 “Streamlit

Command”，将 “rating” 列的控件类型改为数字输入框，并添加帮助文本、最小值、最大值、步长和格式化选项。

disabled：我们禁用了 “command” 和 “is_widget” 列的编辑功能，使它们成为只读。

hide_index：我们隐藏了索引列，只展示了数据内容。

用户可以通过编辑器进行交互，并根据提供的自定义配置进行编辑。在编辑完成后，我们找到评分最高的命令，并输出该命令。

通过使用这些参数，你可以进一步自定义数据编辑器的外观和行为。这让你能够根据特定需求提供灵活的编辑界面，并增加用户体验。

4 定制数据编辑器 - 使用 st.column_config

4.1 使用 st.column_config.Column 定制数据编辑器的列

import pandas as pd
import streamlit as st
data_df = pd.DataFrame(
    {
        "widgets": ["st.selectbox", "st.number_input", "st.text_area", "st.button"],
    }
)
st.data_editor(
    data_df,
    column_config={
        "widgets": st.column_config.Column(
            "Streamlit Widgets",
            help="Streamlit **widget** commands 🎈",
            width="medium",
            required=True,
        )
    },
    hide_index=True,
    num_rows="dynamic",
)

在本章中，我们将介绍如何使用 st.column_config.Column 来定制数据编辑器的列。

在上述示例中，我们首先创建了一个名为 data_df 的数据框，其中包含了一个名为 “widgets” 的列，存储了几个 Streamlit 的小部件命令。

然后，我们使用 st.data_editor 来展示可编辑的数据框，并通过使用 column_config 参数对列进行定制。我们的目标是定制 “widgets” 列。

我们为 “widgets” 列创建了一个 st.column_config.Column 对象，并指定了以下参数：

title：设置列的标题为 “Streamlit Widgets”。

help：提供帮助文本，以解释该列是关于 Streamlit 小部件命令的。

width：指定列的宽度为 “medium”，对于长文本或宽列，可以使用不同的宽度选项。

required：将该列标记为必填项，使用户必须填写该列的值。

通过使用 st.column_config.Column，我们能够对数据编辑器中的列进行更精细的控制和定制。这样，我们可以根据实际需求来设置列的显示样式、帮助文本、宽度以及是否为必填项。

4.2 使用 st.column_config.TextColumn 定制数据编辑器的文本列

import pandas as pd
import streamlit as st
data_df = pd.DataFrame(
    {
        "widgets": ["st.selectbox", "st.number_input", "st.text_area", "st.button"],
    }
)
st.data_editor(
    data_df,
    column_config={
        "widgets": st.column_config.TextColumn(
            "Widgets",
            help="Streamlit **widget** commands 🎈",
            default="st.",
            max_chars=50,
            validate="^st\.[a-z_]+$",
        )
    },
    hide_index=True,
)

在上述示例中，我们继续介绍了 st.column_config 的另一个类 st.column_config.TextColumn，可以用来定制数据编辑器的文本列。

我们仍然使用之前的数据框 data_df，其中包含一个名为 “widgets” 的列，存储了几个 Streamlit 的小部件命令。

使用 st.data_editor 来展示可编辑的数据框，通过使用 column_config 参数对列进行定制。本次我们针对 “widgets” 列使用 st.column_config.TextColumn 进行定制。

我们为 “widgets” 列创建了一个 st.column_config.TextColumn 对象，并指定了以下参数：

title：设置列的标题为 “Widgets”。

help：提供帮助文本，以解释该列是关于 Streamlit 小部件命令的。

default：设置默认值为 “st.”。

max_chars：限制输入文本的最大字符数为 50。

validate：使用正则表达式进行验证，确保值符合 “st.” 以及小写字母和下划线的规则。

通过使用 st.column_config.TextColumn，我们可以对文本列进行更细致的控制和限制。可以设置标题、帮助文本、默认值、字符数限制和输入验证规则，以确保用户提供有效的值。

通过定制文本列，我们可以增强数据编辑器的功能和用户体验，允许用户更轻松地输入和处理数据。