济宁市网站建设_网站建设公司_SSG_seo优化

原文：towardsdatascience.com/how-to-create-well-styled-streamlit-dataframes-part-1-using-the-pandas-styler-e239c0fbe145

我一直是 pandas 中的 styler 方法 的粉丝。当我开始构建 Streamlit 应用程序时，对我来说很清楚，我想样式化我的数据框以帮助可视化数据框，但…惊喜！截至写作时，Streamlit st.dataframe()不支持 Styler 对象，只支持数据框对象。好吧，更正一下，它确实支持它们，但 UI 显示非常糟糕！

这就是为什么我想与你分享我在 Streamlit 中构建优雅数据框的工作方法和想法。我们将涵盖：

1. 如何为数字添加千位分隔符。

2. 如何将数字显示为百分比(从数据中的 0.24 到 UI 中的 24%)

3. 如何添加货币符号。

4. 如何为单元格添加颜色。更好的是，我将与你分享我最喜欢的颜色分级函数。

5. 如何添加表情符号！是的，我们不能没有表情符号 😊 !

st.dataframe() 的默认视图

Streamlit 实际上非常擅长根据数据类型推断最佳显示。想象以下数据框：

mock_data={"Country":["US","IN","BR","ES","AR","IT"],"Period_1":[50_000,30_000,17_000,14_000,22_000,16_000],"Period_2":[52_000,37_000,16_000,12_000,21_000,19_000],}df=pd.DataFrame(mock_data)df['Difference']=df['Period_2']-df['Period_1']df['Percentage Change']=np.round(((df['Period_2']-df['Period_1'])/df['Period_1']),2)df['Percentage Change rank']=df['Percentage Change'].rank(method='dense',ascending=False).astype(int)

默认的st.dataframe()视图已经很不错了。例如，千位分隔符被正确推断。

https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/342e0ea62ec842fed9e1c904e1ff217d.png

图片由作者提供

但是，我们知道我们可以使用 Styler 函数来让它变得更好！

如果我们使用 st.dataframe() 一个 Styler 对象会发生什么？

在深入探讨如何样式化数据框之前，让我们简单地将 pandas 数据框转换为Styler对象，并检查当我们尝试使用st.dataframe()方法渲染Styler对象时会发生什么。

# Creating the styler objectdf.copy().style

https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/118a8d5807b9b7edc030bed1c3d2ec43.png

图片由作者提供

显示现在有点混乱。例如：

• 大数字没有逗号分隔符

• 小数点后 6 位的小数。

这只发生因为我们从“数据框”类型对象转换到了“样式化”类型对象。

格式化千位分隔符和百分比

我们希望一眼就能直观地理解数量级（即千位分隔符）。而且我们不想在心理上乘以小数点 100 来理解百分比（即弄清楚 0.24 是 24%）。

下面的函数将帮助您格式化数字，以便在样式化的数据框中更好地显示。

def_format_with_thousands_commas(val):returnf'{val:,.0f}'def_format_as_percentage(val,prec=0):returnf'{val:.{prec}%}'thousands_cols=['Period_1','Period_2','Difference']perct_cols=['Percentage Change']styler_with_thousands_commas=(raw_styler.format(_format_with_thousands_commas,subset=thousands_cols).format(lambdax:_format_as_percentage(x,2),subset=perct_cols))

https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/5b6c219c410ce77fc22cfccac0854af9.png

图片由作者提供

看起来更好了。

• _ 周期1，_ 周期2和差异列现在与*st.dataframe()*显示相同。所以，我们至少匹配了默认显示。

• 但现在，百分比变化列比默认的小数点格式更易于理解 😊。

添加带有渐变的背景着色

带有颜色的 dataframe => Streamlit 中的良好样式化 dataframe（吉米·克里克特说：颜色过多可能有害）。

我们的下一步是添加一些颜色来帮助我们的视觉分析。我们可以使用简单的cmap应用单元格背景渐变。默认情况下，cmap会根据序列中的数字创建渐变（即，取序列的最小值和最大值）。如果你的数字都是正数或负数，这很完美，但以下情况怎么办？

• 仅对正值使用绿色渐变色

• 仅对负值使用红色渐变色。

为了这个，我创建了一个简单的函数，我在多个情况下都重新使用了它：

def_format_positive_negative_background_colour(val,min_value,max_value):ifval>0:# Normalize positive values to a scale of 0 to 1normalized_val=(val-0)/(max_value-0)# Create a gradient of green colorscolor=plt.cm.Greens(normalized_val*0.7)color_hex=mcolors.to_hex(color)elifval<0:# Normalize negative values to a scale of 0 to -1normalized_val=(val-min_value)/(0-min_value)# Create a gradient of red colorscolor=plt.cm.Reds_r(normalized_val*0.7)color_hex=mcolors.to_hex(color)else:color_hex='white'# For zero values, set the background color to white# Determine text color based on the darkness of the background colorr,g,b=mcolors.hex2color(color_hex)if(r*299+g*587+b*114)/1000>0.5:# Use the formula for perceived brightnesstext_color='black'else:text_color='white'returnf'background-color:{color_hex}; color:{text_color}'min_value_abs_diff=df['Difference'].min()max_value_abs_diff=df['Difference'].max()min_value_perct_diff=df['Percentage Change'].min()max_value_perct_diff=df['Percentage Change'].max()styler_with_colour_gradients=(df.copy().style.map(lambdax:_format_positive_negative_background_colour(x,min_value_abs_diff,max_value_abs_diff),subset=['Difference']).map(lambdax:_format_positive_negative_background_colour(x,min_value_perct_diff,max_value_perct_diff),subset=['Percentage Change']))

https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/7fe0caefdfa381d5b11fd2f689fa8d77.png

作者图片

你可以看到所有正数都着色为绿色，并且从最低（浅色）到最高（深色）有一个阴影。相反，负数着色为红色，但最低的是最深色的颜色。

此外，该函数还确定文本颜色应该是白色还是黑色，这取决于它与单元格背景颜色的对比度。

添加货币符号

如果你知道你正在处理货币，为什么不将货币符号添加到数据中呢？这正是 Excel 所做的，而且嘿，Excel 是一个了不起的产品。老实说，这里没有讽刺。

def_format_with_dollar_sign(val,prec=0):returnf'${val:,.{prec}f}'styler_with_dollar_sign=(df.copy().style.format(_format_with_dollar_sign,subset=['Period_1','Period_2','Difference']))

https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/d075c4821f5b7ef9bbf3c3a885f86d83.png

作者图片

💲 检查 _Period__1, _Period__2 和 _Differenc_e 列 💲

添加表情符号的函数

我们生活在表情符号的世界里，所以你的应用程序在 Streamlit 中没有表情符号的样式化数据框是不可能的。开个玩笑，表情符号也可以帮助我们进行视觉分析。在这个例子中，我使用了金牌、银牌和铜牌表情符号来突出显示最高的正百分比变化。

def_add_medal_emoji(val):ifval==1:returnf"{val}🥇"elifval==2:returnf"{val}🥈"elifval==3:returnf"{val}🥉"else:returnval styler_with_medal_emoji=(df.copy().style.format(_add_medal_emoji,subset=['Percentage Change rank']))

https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/1df77e1c40c3fc4c9dda763d65cae583.png

作者图片

一眼就能看出，哪些国家在 Period 1 和 Period 2 之间有最大的正变化，使用了奖牌表情符号。

目前不支持：添加条形

你是否在 Styler 对象的单元格背景中使用了条形图？遗憾的是，它们在st.dataframe()方法中不受支持。您可以使用带有 HTML 对象的st.write()方法来显示它们，但我不推荐这样做。下面你可以看到它的样子。

https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/8fcf475a5452876193037079604023e7.png

作者图片

不仅用户界面令人震惊……你完全失去了所有st.dataframe()功能，例如排序和格式化单元格的能力。

摘要

如果 Streamlit 支持 Styler 对象，生活将会容易得多。但直到那时，我希望这些想法能帮助您在创建 Streamlit 应用程序的优秀可视化过程中。 我将接着使用 AgGrid 构建等效的漂亮数据框。请保持关注，因为 AgGrid 比 Styler 对象酷多了！

代码在哪里可以找到？

在我的仓库和实时 Streamlit 应用程序中：

• Github 仓库：github.com/JoseParrenoGarcia/Streamlit-pretty-dataframes

• Streamlit 应用程序：app-pretty-dataframes-in2ilkxjw2hgby4uqj9bq2.streamlit.app(当链接打开时，点击按钮启动应用程序)。

进一步阅读

感谢阅读这篇文章！如果您对我的其他文章感兴趣，这里有一篇文章收集了我所有其他博客文章，按主题组织：数据科学团队和项目管理、数据故事讲述、营销与出价科学以及机器学习与建模。

所有我的文章都在一个地方

请保持关注！

如果您想在我发布新文章时收到通知，请随意在 Medium 上关注我或订阅我的 Substack 通讯。此外，我很乐意在领英上与您聊天!

获取关于数据科学最新文章的通知！

Jose 的 Substack | Jose Parreño Garcia | Substack