(七)解析Streamlit的数据元素:探索st.dataframe、st.data_editor、st.column_config、st.table、st.metric和st.json的神奇之处(下)

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: (七)解析Streamlit的数据元素:探索st.dataframe、st.data_editor、st.column_config、st.table、st.metric和st.json的神奇之处

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,创造出令人印象深刻的应用!🚀

相关文章
|
8天前
|
数据采集 前端开发 API
SurfGen爬虫:解析HTML与提取关键数据
SurfGen爬虫:解析HTML与提取关键数据
|
13天前
|
数据采集 监控 搜索推荐
深度解析淘宝商品详情API接口:解锁电商数据新维度,驱动业务增长
淘宝商品详情API接口,是淘宝开放平台为第三方开发者提供的一套用于获取淘宝、天猫等电商平台商品详细信息的应用程序接口。该接口涵盖了商品的基本信息(如标题、价格、图片)、属性参数、库存状况、销量评价、物流信息等,是电商企业实现商品管理、市场分析、营销策略制定等功能的得力助手。
|
23天前
|
搜索推荐 API 开发者
深度解析:利用商品详情 API 接口实现数据获取与应用
在电商蓬勃发展的今天,数据成为驱动业务增长的核心。商品详情API接口作为连接海量商品数据的桥梁,帮助运营者、商家和开发者获取精准的商品信息(如价格、描述、图片、评价等),优化策略、提升用户体验。通过理解API概念、工作原理及不同平台特点,掌握获取权限、构建请求、处理响应和错误的方法,可以将数据应用于商品展示、数据分析、竞品分析和个性化推荐等场景,助力电商创新与发展。未来,随着技术进步,API接口将与人工智能、大数据深度融合,带来更多变革。
62 3
|
27天前
|
存储 搜索推荐 大数据
数据大爆炸:解析大数据的起源及其对未来的启示
数据大爆炸:解析大数据的起源及其对未来的启示
92 15
数据大爆炸:解析大数据的起源及其对未来的启示
|
30天前
|
JSON 小程序 UED
微信小程序 app.json 配置文件解析与应用
本文介绍了微信小程序中 `app.json` 配置文件的详细
138 12
|
30天前
|
JSON 缓存 API
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
39 12
|
1月前
|
存储 分布式计算 Hadoop
基于Java的Hadoop文件处理系统:高效分布式数据解析与存储
本文介绍了如何借鉴Hadoop的设计思想,使用Java实现其核心功能MapReduce,解决海量数据处理问题。通过类比图书馆管理系统,详细解释了Hadoop的两大组件:HDFS(分布式文件系统)和MapReduce(分布式计算模型)。具体实现了单词统计任务,并扩展支持CSV和JSON格式的数据解析。为了提升性能,引入了Combiner减少中间数据传输,以及自定义Partitioner解决数据倾斜问题。最后总结了Hadoop在大数据处理中的重要性,鼓励Java开发者学习Hadoop以拓展技术边界。
50 7
|
1月前
|
JSON 前端开发 搜索推荐
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
|
3月前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释
|
3月前
|
JSON 数据格式 索引
Python中序列化/反序列化JSON格式的数据
【11月更文挑战第4天】本文介绍了 Python 中使用 `json` 模块进行序列化和反序列化的操作。序列化是指将 Python 对象(如字典、列表)转换为 JSON 字符串,主要使用 `json.dumps` 方法。示例包括基本的字典和列表序列化,以及自定义类的序列化。反序列化则是将 JSON 字符串转换回 Python 对象,使用 `json.loads` 方法。文中还提供了具体的代码示例,展示了如何处理不同类型的 Python 对象。

推荐镜像

更多