4.11 使用 st.column_config.ImageColumn 定制数据编辑器的图片列

import pandas as pd
import streamlit as st
data_df = pd.DataFrame(
    {
        "apps": [
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/5435b8cb-6c6c-490b-9608-799b543655d3/Home_Page.png",
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/ef9a7627-13f2-47e5-8f65-3f69bb38a5c2/Home_Page.png",
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/31b99099-8eae-4ff8-aa89-042895ed3843/Home_Page.png",
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/6a399b09-241e-4ae7-a31f-7640dc1d181e/Home_Page.png",
        ],
    }
)
st.data_editor(
    data_df,
    column_config={
        "apps": st.column_config.ImageColumn(
            "Preview Image", help="Streamlit app preview screenshots"
        )
    },
    hide_index=True,
)

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

在上述示例中，我们创建了一个名为 data_df 的数据框，其中包含一个名为 “apps” 的列，存储了不同 Streamlit 应用的预览图片链接。

然后，我们使用 st.data_editor 来展示可编辑的数据框，并通过 column_config 参数对列进行定制。这次我们针对 “apps” 列使用了 st.column_config.ImageColumn 进行定制。

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

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

help：提供对该列的帮助信息，为 “Streamlit app preview screenshots”。

通过使用 st.column_config.ImageColumn，我们可以对图片列进行定制和控制。可以设置标题和帮助信息，以便用户能够更好地了解和操作图片列的数据。

在数据编辑器中使用定制的图片列，可以方便地查看和编辑图片链接，适用于需要存储和展示图片链接数据的字段。

4.12 使用 st.column_config.LineChartColumn 定制数据编辑器的折线图列

import pandas as pd
import streamlit as st
data_df = pd.DataFrame(
    {
        "sales": [
            [0, 4, 26, 80, 100, 40],
            [80, 20, 80, 35, 40, 100],
            [10, 20, 80, 80, 70, 0],
            [10, 100, 20, 100, 30, 100],
        ],
    }
)
st.data_editor(
    data_df,
    column_config={
        "sales": st.column_config.LineChartColumn(
            "Sales (last 6 months)",
            width="medium",
            help="The sales volume in the last 6 months",
            y_min=0,
            y_max=100,
         ),
    },
    hide_index=True,
)

在本节中，我们将介绍如何使用 st.column_config.LineChartColumn 来定制数据编辑器的折线图列。

在上述示例中，我们创建了一个名为 data_df 的数据框，其中包含一个名为 “sales” 的列，该列包含了过去6个月的销售数据。

然后，我们使用 st.data_editor 来展示可编辑的数据框，并通过 column_config 参数对列进行定制。这次我们针对 “sales” 列使用了 st.column_config.LineChartColumn 进行定制。

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

title：设置列的标题为 “Sales (last 6 months)”。

width：设置折线图的宽度为 “medium”，可以根据需求设置合适的宽度。

help：提供对该列的帮助信息，为 “The sales volume in the last 6 months”。

y_min：设置折线图的 Y 轴最小值为 0。

y_max：设置折线图的 Y 轴最大值为 100。

通过使用 st.column_config.LineChartColumn，我们可以对折线图列进行定制和控制。可以设置标题、宽度、帮助信息以及 Y 轴的取值范围，以便用户更好地理解和操作折线图列的数据。

在数据编辑器中使用定制的折线图列，可以方便地查看和编辑折线图数据，适用于需要存储和展示趋势数据的字段。

4.13 使用 st.column_config.BarChartColumn 定制数据编辑器的柱状图列

import pandas as pd
import streamlit as st
data_df = pd.DataFrame(
    {
        "sales": [
            [0, 4, 26, 80, 100, 40],
            [80, 20, 80, 35, 40, 100],
            [10, 20, 80, 80, 70, 0],
            [10, 100, 20, 100, 30, 100],
        ],
    }
)
st.data_editor(
    data_df,
    column_config={
        "sales": st.column_config.BarChartColumn(
            "Sales (last 6 months)",
            help="The sales volume in the last 6 months",
            y_min=0,
            y_max=100,
        ),
    },
    hide_index=True,
)

在本节中，我们将介绍如何使用 st.column_config.BarChartColumn 来定制数据编辑器的柱状图列。

在上述示例中，我们创建了一个名为 data_df 的数据框，其中包含一个名为 “sales” 的列，该列包含了过去6个月的销售数据。

然后，我们使用 st.data_editor 来展示可编辑的数据框，并通过 column_config 参数对列进行定制。这次我们针对 “sales” 列使用了 st.column_config.BarChartColumn 进行定制。

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

title：设置列的标题为 “Sales (last 6 months)”。

help：提供对该列的帮助信息，为 “The sales volume in the last 6 months”。

y_min：设置柱状图的 Y 轴最小值为 0。

y_max：设置柱状图的 Y 轴最大值为 100。

通过使用 st.column_config.BarChartColumn，我们可以对柱状图列进行定制和控制。可以设置标题、帮助信息以及 Y 轴的取值范围，以便用户更好地理解和操作柱状图列的数据。

在数据编辑器中使用定制的柱状图列，可以方便地查看和编辑柱状图数据，适用于需要存储和展示分类数据的字段。

4.14 使用 st.column_config.ProgressColumn 定制数据编辑器的进度条列

import pandas as pd
import streamlit as st
data_df = pd.DataFrame(
    {
        "sales": [200, 550, 1000, 80],
    }
)
st.data_editor(
    data_df,
    column_config={
        "sales": st.column_config.ProgressColumn(
            "Sales volume",
            help="The sales volume in USD",
            format="$%f",
            min_value=0,
            max_value=1000,
        ),
    },
    hide_index=True,
)

在本节中，我们将介绍如何使用 st.column_config.ProgressColumn 来定制数据编辑器的进度条列。

在上述示例中，我们创建了一个名为 data_df 的数据框，其中包含一个名为 “sales” 的列，该列包含了销售数据的数值。

然后，我们使用 st.data_editor 来展示可编辑的数据框，并通过 column_config 参数对列进行定制。这次我们针对 “sales” 列使用了 st.column_config.ProgressColumn 进行定制。

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

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

help：提供对该列的帮助信息，为 “The sales volume in USD”。

format：设置数值的格式为 “$%f”，这样数值会以美元符号开头并保留两位小数。

min_value：设置进度条的最小值为 0。

max_value：设置进度条的最大值为 1000。

通过使用 st.column_config.ProgressColumn，我们可以对进度条列进行定制和控制。可以设置标题、帮助信息、数值格式以及进度条的取值范围，以便用户更好地理解和操作进度条列的数据。

在数据编辑器中使用定制的进度条列，可以方便地查看和编辑数值数据的进度，适用于需要存储和展示进度数据的字段。

5 使用 st.table 展示数据框

import streamlit as st
import pandas as pd
import numpy as np
df = pd.DataFrame(
   np.random.randn(10, 5),
   columns=('col %d' % i for i in range(5)))
st.table(df)

在本章中，我们将介绍如何使用 st.table 来展示数据框。

在上述示例中，我们创建了一个名为 df 的数据框，其中包含了随机生成的 10 行 5 列的数据。

然后，我们使用 st.table 来展示这个数据框。st.table 是 Streamlit 提供的一个用于展示数据框的方法，可以直接在网页上以表格的形式展示数据。

通过使用 st.table，我们可以方便地查看和分析数据框的内容。它提供了表格的形式展示数据，并支持排序、筛选和搜索功能，使得数据的浏览和分析更加直观和便捷。

在展示数据框时，st.table 会自动根据数据框的大小调整表格的布局，保证内容的可见性和易读性。

6 使用 st.metric 展示指标数据

6.1 使用 st.columns 和 st.metric 创建单个指标数据显示

import streamlit as st
st.metric(label="Temperature", value="70 °F", delta="1.2 °F")

在本章中，我们将介绍如何使用 st.metric 来展示指标数据。

在上述示例中，我们使用 st.metric 来展示温度的指标数据。st.metric 是 Streamlit 提供的一个方法，用于展示具有标签、值和增量的指标数据。

在 st.metric 方法中，我们可以设置以下参数：

label：表示指标的名称或标签，例如 “Temperature”。

value：表示指标的值，例如 “70 °F”。

delta：表示指标的增量或变化量，例如 “1.2 °F”。

通过使用 st.metric，我们可以直观地展示指标数据，使其更易读和易理解。指标数据通常用于表示某个事物的状态或性能，并可以显示其当前值和变化量，方便用户进行比较和分析。

在展示指标数据时，st.metric 会根据提供的值和增量来自动着色和显示符号，以便更清晰地传达数据的含义。

6.2 使用 st.columns 和 st.metric 创建多个指标数据显示

import streamlit as st
col1, col2, col3 = st.columns(3)
col1.metric("Temperature", "70 °F", "1.2 °F")
col2.metric("Wind", "9 mph", "-8%")
col3.metric("Humidity", "86%", "4%")

在本章中，我们将介绍如何使用 st.columns 和 st.metric 结合起来创建多个指标数据的显示。

在上述示例中，我们使用了 st.columns 方法创建了一个具有 3 列的布局，然后在每一列中使用了 st.metric 来展示不同的指标数据。

首先，我们使用 st.columns(3) 创建了 col1、col2 和 col3 三个列。然后，我们分别在这三个列中使用 st.metric 方法来展示不同的指标数据。

对于每个 st.metric，我们都提供了以下信息：

label：指标的名称或标签，例如 “Temperature”、“Wind” 和 “Humidity”。

value：指标的值，例如 “70 °F”、“9 mph” 和 “86%”。

delta：指标的增量或变化量，例如 “1.2 °F”、“-8%” 和 “4%”。

通过结合使用 st.columns 和 st.metric，我们可以在不同的列中展示多个指标数据，使之更直观和易于比较。

6.3 控制增量指示器的颜色和显示

import streamlit as st
st.metric(label="Gas price", value=4, delta=-0.5,
    delta_color="inverse")
st.metric(label="Active developers", value=123, delta=123,
    delta_color="off")

在本章中，我们将介绍如何控制增量指示器的颜色和显示。

在上述示例中，我们使用 st.metric 展示了两个不同的指标数据，并通过设置 delta_color 参数来控制增量指示器的颜色和显示。

在第一个指标数据中，我们设置 delta_color=“inverse”，这将导致增量指示器的颜色反转，即当增量为负数时，指示器将显示为绿色，而不是默认的红色。

在第二个指标数据中，我们设置 delta_color=“off”，这将关闭增量指示器的显示，即不显示增量指示器。

通过控制增量指示器的颜色和显示，我们可以更加灵活地呈现指标数据，使其更符合特定需求和场景。

7 使用 st.json 展示 JSON 数据

import streamlit as st
st.json({
    'foo': 'bar',
    'baz': 'boz',
    'stuff': [
        'stuff 1',
        'stuff 2',
        'stuff 3',
        'stuff 5',
    ],
})

在本章中，我们将介绍如何使用 st.json 来展示 JSON 数据。

在上述示例中，我们使用 st.json 来展示一个简单的 JSON 对象。st.json 是 Streamlit 提供的一个方法，用于展示 JSON 数据。

我们将一个 JSON 对象传递给 st.json 方法进行展示。JSON 对象可以包含键值对，键可以是字符串，值可以是字符串、数字、布尔值、列表或嵌套的 JSON 对象。

通过使用 st.json，我们可以以格式化的形式展示 JSON 数据，使其更易读和理解。展示的 JSON 数据可以包含多层嵌套，方便查看和分析复杂的结构。

8 结语

在本文中，我们学习了如何使用 Streamlit 提供的各种方法来展示和呈现指标数据和 JSON 数据。无论是单独展示一个指标数据，还是创建多个指标数据的布局，亦或是控制增量指示器的颜色和显示，Streamlit 提供了简单而强大的工具来帮助我们呈现数据。此外，通过使用 st.json 方法，我们还可以以可视化和易读的方式展示复杂的 JSON 数据。通过掌握这些方法，我们可以轻松地创建交互式和可视化的数据展示应用，提供更好的用户体验和数据理解。无论是在数据科学、可视化还是产品展示中，Streamlit 都是一个非常有用的工具。期待读者继续深入学习和探索 Streamlit，创造出令人印象深刻的应用！🚀