pandas Chrome 或 Edge 中大型数据框中的所有行不显示样式
pandas styling doesn't display for all rows in large dataframes in Chrome or Edge
更新：
问题似乎与在 Google Chrome 和 Microsoft Edge 中显示带有 pandas 样式的 HTML 有关。
Firefox 中的 JupyterLab 正确显示所有样式行并正确呈现输出 HTML 文件。
更新的问题是
- 为什么 pandas 渲染的 HTML 不能完全显示 Chrome 或 Edge 中的所有样式？
- 是否有更有效的方法来应用 pandas 完成的样式，以便 HTML 也适用于 Chrome 和 Edge？
版本：
pandas v1.2.4Chrome v90.0.4430.93 (Official Build) (64-bit)Edge v90.0.818.56 (Official build) (64-bit)
原文：
- 问题 - 它们是相互关联的：
- 为什么不是所有行都在 Jupyter 中显示背景样式或写入 HTML？
- 所有行都应具有绿色样式，但最后 5 行不显示样式。
- 如何使所有行都显示背景样式？
- 给定一个大数据框，在本例中
474 rows x 35 columns，应用的样式停止显示。
- 如果行数或列数增加到超过此大小，则不会显示更多行。
- 我们可以从样式图中看到，行已正确映射了背景色，但未显示。
- 如果减少行数或列数，则所有行都会显示正确的样式。
- 在
jupyterlab v3.0.11 中测试
- 在
PyCharm 2021.1 (Professional Edition) Build #PY-211.6693.115, built on April 6, 2021 中测试将重新渲染的样式器保存到文件中具有相同的结果，因此这不仅仅是 jupyter 的问题。
- 已在控制台中测试
- 这个问题在我试过的两个不同系统上都可以重现。
- 如果形状缩小为
471 rows × 35 columns 或 474 rows × 34 columns，则所有行都正确显示突出显示。
- 相关 pandas 错误报告：40913
可重现的数据帧
import pandas as pd
import numpy as np
from faker import Faker # conda install -c conda-forge faker or pip install Faker
# for fake names
fake = Faker()
# test data
np.random.seed(365)
rows = 11000
# change 36 or 158 to test where the rows stop appearing
vals = {f'val{i}': np.random.randint(1, 11, size=(rows)) for i in range(1, 36)}
data = {'name': np.random.choice([fake.unique.name() for i in range(158)], size=rows),
'cat': np.random.randint(1, 4, size=(rows))}
data.update(vals)
df = pd.DataFrame(data)
# used to create the mask for the background color
mean = df.groupby('cat').mean().round(2)
# calculate the mean for each name and cat
cat_mean = df.groupby(['name', 'cat']).mean()
def color(x):
"""Function to apply background color"""
c1 = 'background-color: green'
c = ''
# compare columns
mask1 = x.gt(mean)
# DataFrame with same index and columns names as original filled empty strings
df1 = pd.DataFrame(c, index=x.index, columns=x.columns)
# modify values of df1 column by boolean mask
df1[mask1] = c1
display(df1)
return df1
# Last line in notebook displays the styled dataframe
cat_mean.style.apply(color, axis=None)
# Last line in PyCharm saving rendered styler to file - comment out when in Jupyter
cm = cat_mean.style.apply(color, axis=None).set_precision(3).render()
# save the output to an html file
with open('cm_test.html', 'w') as f:
f.write(cm)
参考
- 此
已被应用背景颜色的函数引用。
- 这个question类似，但是没有答案。
pd.show_versions()
的输出
- 所有
None 的包都没有显示为保存 space
INSTALLED VERSIONS
------------------
commit : f2c8480af2f25efdbd803218b9d87980f416563e
python : 3.8.8.final.0 or 3.9.2.final.0
python-bits : 64
OS : Windows
OS-release : 10
Version : 10.0.19041
machine : AMD64
processor : Intel64 Family 6 Model 60 Stepping 3, GenuineIntel
byteorder : little
LOCALE : English_United States.1252
pandas : 1.2.3 or 1.2.4
numpy : 1.19.2
pytz : 2021.1
dateutil : 2.8.1
pip : 21.0.1
setuptools : 52.0.0.post20210125
Cython : 0.29.22
pytest : 6.2.3
sphinx : 3.5.3
xlsxwriter : 1.3.8
lxml.etree : 4.6.3
html5lib : 1.1
jinja2 : 2.11.3
IPython : 7.22.0
pandas_datareader: 0.9.0
bs4 : 4.9.3
bottleneck : 1.3.2
fsspec : 0.9.0
matplotlib : 3.3.4
numexpr : 2.7.3
openpyxl : 3.0.7
scipy : 1.6.2
sqlalchemy : 1.4.5
tables : 3.6.1
tabulate : 0.8.9
xlrd : 2.0.1
xlwt : 1.3.0
numba : 0.53.1
解决方法
拆分数据帧
- 令人不满意，但拆分 DataFrame 并应用样式会起作用，因为如果减小整体大小。
cat_mean.iloc[:237, :].style.apply(color, axis=None)
cat_mean.iloc[237:, :].style.apply(color, axis=None)
保存到 Excel
- 保存到 Excel
时，所有行都以高亮颜色正确显示
test = cat_mean.style.apply(color, axis=None)
test.to_excel('test.xlsx', engine='openpyxl')
更新
- 自
pandas 1.3.0 起，以下实现正确突出显示了 OP 中 (474, 35) 测试数据的所有预期列和行。
- 它也成功地使用形状为
(7760, 35) 的数据框进行了测试。
- 此实现来自pandas Table Visualization User Guide: Set classes instead of using Styler functions
# also use code previous to list line for the test data
# calculate the mean for each name and cat
cat_mean = df.groupby(['name', 'cat']).mean()
def test(s, props=''):
t = np.where(s.gt(mean[s.name]), props, '')
return t
build = lambda x: pd.DataFrame(x, index=cat_mean.index, columns=cat_mean.columns)
cls1 = build(cat_mean.apply(test, props='cls-1 ', axis=0))
test = cat_mean.style.set_table_styles([{'selector': '.cls-1', 'props': [('color', 'white'), ('background-color', 'darkblue')]}]).set_td_classes(cls1)
# save the output to an html file
with open('cm_test.html', 'w') as f:
f.write(test.render())
- 工作实施的输出
- OP 中的实施输出
回答：为什么这在 Chrome 或 Edge 中不起作用？
- 根据错误 #39400，大型 DataFrame 会出现此问题，因为 Styler 将所有 CSS id 放在一个属性上，所有浏览器都无法解决。
- 在下面的小片段中，可以看到所有 ID 都在顶部。
- 虽然只包含 1 table 行的数据，但代码段 ID 为 5 行和 35 列。
<style type="text/css" >
#T__row0_col0,#T__row0_col1,#T__row0_col4,#T__row0_col5,#T__row0_col6,#T__row0_col11,#T__row0_col12,#T__row0_col13,#T__row0_col16,#T__row0_col19,#T__row0_col20,#T__row0_col22,#T__row0_col23,#T__row0_col24,#T__row0_col26,#T__row0_col27,#T__row0_col28,#T__row0_col30,#T__row0_col33,#T__row0_col34,#T__row1_col0,#T__row1_col1,#T__row1_col4,#T__row1_col8,#T__row1_col9,#T__row1_col11,#T__row1_col13,#T__row1_col15,#T__row1_col17,#T__row1_col21,#T__row1_col22,#T__row1_col26,#T__row1_col31,#T__row1_col34,#T__row2_col0,#T__row2_col1,#T__row2_col3,#T__row2_col7,#T__row2_col8,#T__row2_col9,#T__row2_col10,#T__row2_col12,#T__row2_col13,#T__row2_col16,#T__row2_col19,#T__row2_col20,#T__row2_col24,#T__row2_col26,#T__row2_col27,#T__row2_col28,#T__row2_col30,#T__row2_col32,#T__row3_col0,#T__row3_col3,#T__row3_col4,#T__row3_col6,#T__row3_col7,#T__row3_col8,#T__row3_col9,#T__row3_col15,#T__row3_col17,#T__row3_col20,#T__row3_col22,#T__row3_col27,#T__row3_col28,#T__row3_col29,#T__row3_col31,#T__row3_col34,#T__row4_col0,#T__row4_col1,#T__row4_col2,#T__row4_col3,#T__row4_col4,#T__row4_col6,#T__row4_col8,#T__row4_col14,#T__row4_col16,#T__row4_col17,#T__row4_col18,#T__row4_col19,#T__row4_col22,#T__row4_col23,#T__row4_col25,#T__row4_col27,#T__row4_col29,#T__row4_col32,#T__row4_col33{
text-align: center;
}#T__row0_col2,#T__row0_col3,#T__row0_col7,#T__row0_col8,#T__row0_col9,#T__row0_col10,#T__row0_col14,#T__row0_col15,#T__row0_col17,#T__row0_col18,#T__row0_col21,#T__row0_col25,#T__row0_col29,#T__row0_col31,#T__row0_col32,#T__row1_col2,#T__row1_col3,#T__row1_col5,#T__row1_col6,#T__row1_col7,#T__row1_col10,#T__row1_col12,#T__row1_col14,#T__row1_col16,#T__row1_col18,#T__row1_col19,#T__row1_col20,#T__row1_col23,#T__row1_col24,#T__row1_col25,#T__row1_col27,#T__row1_col28,#T__row1_col29,#T__row1_col30,#T__row1_col32,#T__row1_col33,#T__row2_col2,#T__row2_col4,#T__row2_col5,#T__row2_col6,#T__row2_col11,#T__row2_col14,#T__row2_col15,#T__row2_col17,#T__row2_col18,#T__row2_col21,#T__row2_col22,#T__row2_col23,#T__row2_col25,#T__row2_col29,#T__row2_col31,#T__row2_col33,#T__row2_col34,#T__row3_col1,#T__row3_col2,#T__row3_col5,#T__row3_col10,#T__row3_col11,#T__row3_col12,#T__row3_col13,#T__row3_col14,#T__row3_col16,#T__row3_col18,#T__row3_col19,#T__row3_col21,#T__row3_col23,#T__row3_col24,#T__row3_col25,#T__row3_col26,#T__row3_col30,#T__row3_col32,#T__row3_col33,#T__row4_col5,#T__row4_col7,#T__row4_col9,#T__row4_col10,#T__row4_col11,#T__row4_col12,#T__row4_col13,#T__row4_col15,#T__row4_col20,#T__row4_col21,#T__row4_col24,#T__row4_col26,#T__row4_col28,#T__row4_col30,#T__row4_col31,#T__row4_col34{
background-color: green;
text-align: center;
}</style><table id="T__" ><thead> <tr> <th class="blank" ></th> <th class="blank level0" ></th> <th class="col_heading level0 col0" >val1</th> <th class="col_heading level0 col1" >val2</th> <th class="col_heading level0 col2" >val3</th> <th class="col_heading level0 col3" >val4</th> <th class="col_heading level0 col4" >val5</th> <th class="col_heading level0 col5" >val6</th> <th class="col_heading level0 col6" >val7</th> <th class="col_heading level0 col7" >val8</th> <th class="col_heading level0 col8" >val9</th> <th class="col_heading level0 col9" >val10</th> <th class="col_heading level0 col10" >val11</th> <th class="col_heading level0 col11" >val12</th> <th class="col_heading level0 col12" >val13</th> <th class="col_heading level0 col13" >val14</th> <th class="col_heading level0 col14" >val15</th> <th class="col_heading level0 col15" >val16</th> <th class="col_heading level0 col16" >val17</th> <th class="col_heading level0 col17" >val18</th> <th class="col_heading level0 col18" >val19</th> <th class="col_heading level0 col19" >val20</th> <th class="col_heading level0 col20" >val21</th> <th class="col_heading level0 col21" >val22</th> <th class="col_heading level0 col22" >val23</th> <th class="col_heading level0 col23" >val24</th> <th class="col_heading level0 col24" >val25</th> <th class="col_heading level0 col25" >val26</th> <th class="col_heading level0 col26" >val27</th> <th class="col_heading level0 col27" >val28</th> <th class="col_heading level0 col28" >val29</th> <th class="col_heading level0 col29" >val30</th> <th class="col_heading level0 col30" >val31</th> <th class="col_heading level0 col31" >val32</th> <th class="col_heading level0 col32" >val33</th> <th class="col_heading level0 col33" >val34</th> <th class="col_heading level0 col34" >val35</th> </tr> <tr> <th class="index_name level0" >name</th> <th class="index_name level1" >cat</th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> </tr></thead><tbody>
<tr>
<th id="T__level0_row0" class="row_heading level0 row0" rowspan="3">Alisha Ortiz</th>
<th id="T__level1_row0" class="row_heading level1 row0" >1</th>
<td id="T__row0_col0" class="data row0 col0" >4.46</td>
<td id="T__row0_col1" class="data row0 col1" >4.62</td>
<td id="T__row0_col2" class="data row0 col2" >5.73</td>
<td id="T__row0_col3" class="data row0 col3" >6.12</td>
<td id="T__row0_col4" class="data row0 col4" >4.77</td>
<td id="T__row0_col5" class="data row0 col5" >4.73</td>
<td id="T__row0_col6" class="data row0 col6" >4.50</td>
<td id="T__row0_col7" class="data row0 col7" >6.12</td>
<td id="T__row0_col8" class="data row0 col8" >5.50</td>
<td id="T__row0_col9" class="data row0 col9" >5.92</td>
<td id="T__row0_col10" class="data row0 col10" >6.08</td>
<td id="T__row0_col11" class="data row0 col11" >4.92</td>
<td id="T__row0_col12" class="data row0 col12" >5.42</td>
<td id="T__row0_col13" class="data row0 col13" >5.38</td>
<td id="T__row0_col14" class="data row0 col14" >6.08</td>
<td id="T__row0_col15" class="data row0 col15" >5.77</td>
<td id="T__row0_col16" class="data row0 col16" >5.31</td>
<td id="T__row0_col17" class="data row0 col17" >5.58</td>
<td id="T__row0_col18" class="data row0 col18" >6.12</td>
<td id="T__row0_col19" class="data row0 col19" >4.77</td>
<td id="T__row0_col20" class="data row0 col20" >5.19</td>
<td id="T__row0_col21" class="data row0 col21" >5.96</td>
<td id="T__row0_col22" class="data row0 col22" >4.88</td>
<td id="T__row0_col23" class="data row0 col23" >5.31</td>
<td id="T__row0_col24" class="data row0 col24" >4.65</td>
<td id="T__row0_col25" class="data row0 col25" >5.88</td>
<td id="T__row0_col26" class="data row0 col26" >5.38</td>
<td id="T__row0_col27" class="data row0 col27" >5.27</td>
<td id="T__row0_col28" class="data row0 col28" >4.88</td>
<td id="T__row0_col29" class="data row0 col29" >6.35</td>
<td id="T__row0_col30" class="data row0 col30" >5.19</td>
<td id="T__row0_col31" class="data row0 col31" >5.81</td>
<td id="T__row0_col32" class="data row0 col32" >5.85</td>
<td id="T__row0_col33" class="data row0 col33" >5.46</td>
<td id="T__row0_col34" class="data row0 col34" >4.50</td>
</tr>
回答：是否有更有效的方法来应用样式？
- OP 已经建议将 DataFrame 分成几个部分。
- Pandas：Table 可视化用户指南 包含可能的 Optimizations
- 设置
uuid_len=0、cell_ids=False使文件大小稍微变小，但没有解决这个问题。
s4 = Styler(cat_mean, uuid_len=0, cell_ids=False).apply(color, axis=None)- 通常 uuid 看起来像
id="T_5409d_level0_row0"，但是 uuid_len=0，它看起来像 id="T__level0_row0"
- 尽可能使用
table_styles：这些将 类 添加到行或列（而不是单个单元格），因此如果您有这些分组，最好使用它们。
- 在 OP 的情况下，有很多行/列，设置行或列
table_styles 可能不是有效的选项
- 有方法
set_td_classes，可以引用外部css类。 （错误修复在 1.3.0 中）
- 以下使用
class 的代码应该可以工作，但受到错误 #39317 的影响
def test(s, props=''):
t = np.where(s.gt(mean[s.name]), props, '')
return t
build = lambda x: pd.DataFrame(x, index=cat_mean.index, columns=cat_mean.columns)
cls1 = build(cat_mean.apply(test, props='cls-1 ', axis=0))
test = cat_mean.style.set_table_styles([{'selector': '.cls-1', 'props': [('color', 'white'), ('background-color', 'darkblue')]}]).set_td_classes(cls1)
- 应该生成更像下面的 HTML，它对每个值使用
class=，而不是将所有样式化的行 ID 放在 HTML 的顶部。
- 但是，如上所述，这也有一个错误，无法正常工作
<style type="text/css" >
#T_b3f37_ .cls-1 {
color: white;
background-color: darkblue;
}</style><table id="T_b3f37_" ><thead> <tr> <th class="blank" ></th> <th class="blank level0" ></th> <th class="col_heading level0 col0" >val1</th> <th class="col_heading level0 col1" >val2</th> <th class="col_heading level0 col2" >val3</th> <th class="col_heading level0 col3" >val4</th> <th class="col_heading level0 col4" >val5</th> <th class="col_heading level0 col5" >val6</th> <th class="col_heading level0 col6" >val7</th> <th class="col_heading level0 col7" >val8</th> <th class="col_heading level0 col8" >val9</th> <th class="col_heading level0 col9" >val10</th> <th class="col_heading level0 col10" >val11</th> <th class="col_heading level0 col11" >val12</th> <th class="col_heading level0 col12" >val13</th> <th class="col_heading level0 col13" >val14</th> <th class="col_heading level0 col14" >val15</th> <th class="col_heading level0 col15" >val16</th> <th class="col_heading level0 col16" >val17</th> <th class="col_heading level0 col17" >val18</th> <th class="col_heading level0 col18" >val19</th> <th class="col_heading level0 col19" >val20</th> <th class="col_heading level0 col20" >val21</th> <th class="col_heading level0 col21" >val22</th> <th class="col_heading level0 col22" >val23</th> <th class="col_heading level0 col23" >val24</th> <th class="col_heading level0 col24" >val25</th> <th class="col_heading level0 col25" >val26</th> <th class="col_heading level0 col26" >val27</th> <th class="col_heading level0 col27" >val28</th> <th class="col_heading level0 col28" >val29</th> <th class="col_heading level0 col29" >val30</th> <th class="col_heading level0 col30" >val31</th> <th class="col_heading level0 col31" >val32</th> <th class="col_heading level0 col32" >val33</th> <th class="col_heading level0 col33" >val34</th> <th class="col_heading level0 col34" >val35</th> </tr> <tr> <th class="index_name level0" >name</th> <th class="index_name level1" >cat</th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> </tr></thead><tbody>
<tr>
<th id="T_b3f37_level0_row0" class="row_heading level0 row0" rowspan="3">Adriana Mcknight</th>
<th id="T_b3f37_level1_row0" class="row_heading level1 row0" >1</th>
<td id="T_b3f37_row0_col0" class="data row0 col0 cls-1 " >5.782609</td>
<td id="T_b3f37_row0_col1" class="data row0 col1 cls-1 " >5.652174</td>
<td id="T_b3f37_row0_col2" class="data row0 col2 cls-1 " >6.130435</td>
<td id="T_b3f37_row0_col3" class="data row0 col3 cls-1 " >6.086957</td>
<td id="T_b3f37_row0_col4" class="data row0 col4" >4.478261</td>
<td id="T_b3f37_row0_col5" class="data row0 col5" >4.565217</td>
<td id="T_b3f37_row0_col6" class="data row0 col6" >5.826087</td>
<td id="T_b3f37_row0_col7" class="data row0 col7" >5.956522</td>
<td id="T_b3f37_row0_col8" class="data row0 col8" >4.782609</td>
<td id="T_b3f37_row0_col9" class="data row0 col9" >5.347826</td>
<td id="T_b3f37_row0_col10" class="data row0 col10" >5.260870</td>
<td id="T_b3f37_row0_col11" class="data row0 col11" >5.130435</td>
<td id="T_b3f37_row0_col12" class="data row0 col12" >5.217391</td>
<td id="T_b3f37_row0_col13" class="data row0 col13" >6.173913</td>
<td id="T_b3f37_row0_col14" class="data row0 col14" >5.043478</td>
<td id="T_b3f37_row0_col15" class="data row0 col15" >6.391304</td>
<td id="T_b3f37_row0_col16" class="data row0 col16" >5.217391</td>
<td id="T_b3f37_row0_col17" class="data row0 col17" >5.913043</td>
<td id="T_b3f37_row0_col18" class="data row0 col18" >5.608696</td>
<td id="T_b3f37_row0_col19" class="data row0 col19" >5.869565</td>
<td id="T_b3f37_row0_col20" class="data row0 col20" >6.086957</td>
<td id="T_b3f37_row0_col21" class="data row0 col21" >4.826087</td>
<td id="T_b3f37_row0_col22" class="data row0 col22" >5.739130</td>
<td id="T_b3f37_row0_col23" class="data row0 col23" >6.304348</td>
<td id="T_b3f37_row0_col24" class="data row0 col24" >5.347826</td>
<td id="T_b3f37_row0_col25" class="data row0 col25" >5.173913</td>
<td id="T_b3f37_row0_col26" class="data row0 col26" >4.608696</td>
<td id="T_b3f37_row0_col27" class="data row0 col27" >5.391304</td>
<td id="T_b3f37_row0_col28" class="data row0 col28" >5.652174</td>
<td id="T_b3f37_row0_col29" class="data row0 col29" >5.434783</td>
<td id="T_b3f37_row0_col30" class="data row0 col30" >5.565217</td>
<td id="T_b3f37_row0_col31" class="data row0 col31" >5.956522</td>
<td id="T_b3f37_row0_col32" class="data row0 col32" >6.043478</td>
<td id="T_b3f37_row0_col33" class="data row0 col33" >5.217391</td>
<td id="T_b3f37_row0_col34" class="data row0 col34 cls-1 " >5.521739</td>
</tr>
更新：
问题似乎与在 Google Chrome 和 Microsoft Edge 中显示带有 pandas 样式的 HTML 有关。
Firefox 中的 JupyterLab 正确显示所有样式行并正确呈现输出 HTML 文件。
更新的问题是
- 为什么 pandas 渲染的 HTML 不能完全显示 Chrome 或 Edge 中的所有样式？
- 是否有更有效的方法来应用 pandas 完成的样式，以便 HTML 也适用于 Chrome 和 Edge？
版本：
pandas v1.2.4Chrome v90.0.4430.93 (Official Build) (64-bit)Edge v90.0.818.56 (Official build) (64-bit)
原文：
- 问题 - 它们是相互关联的：
- 为什么不是所有行都在 Jupyter 中显示背景样式或写入 HTML？
- 所有行都应具有绿色样式，但最后 5 行不显示样式。
- 如何使所有行都显示背景样式？
- 为什么不是所有行都在 Jupyter 中显示背景样式或写入 HTML？
- 给定一个大数据框，在本例中
474 rows x 35 columns，应用的样式停止显示。 - 如果行数或列数增加到超过此大小，则不会显示更多行。
- 我们可以从样式图中看到，行已正确映射了背景色，但未显示。
- 如果减少行数或列数，则所有行都会显示正确的样式。
- 在
jupyterlab v3.0.11 中测试
- 在
PyCharm 2021.1 (Professional Edition) Build #PY-211.6693.115, built on April 6, 2021中测试将重新渲染的样式器保存到文件中具有相同的结果，因此这不仅仅是jupyter的问题。 - 已在控制台中测试
- 这个问题在我试过的两个不同系统上都可以重现。
- 如果形状缩小为
471 rows × 35 columns或474 rows × 34 columns，则所有行都正确显示突出显示。 - 相关 pandas 错误报告：40913
可重现的数据帧
import pandas as pd
import numpy as np
from faker import Faker # conda install -c conda-forge faker or pip install Faker
# for fake names
fake = Faker()
# test data
np.random.seed(365)
rows = 11000
# change 36 or 158 to test where the rows stop appearing
vals = {f'val{i}': np.random.randint(1, 11, size=(rows)) for i in range(1, 36)}
data = {'name': np.random.choice([fake.unique.name() for i in range(158)], size=rows),
'cat': np.random.randint(1, 4, size=(rows))}
data.update(vals)
df = pd.DataFrame(data)
# used to create the mask for the background color
mean = df.groupby('cat').mean().round(2)
# calculate the mean for each name and cat
cat_mean = df.groupby(['name', 'cat']).mean()
def color(x):
"""Function to apply background color"""
c1 = 'background-color: green'
c = ''
# compare columns
mask1 = x.gt(mean)
# DataFrame with same index and columns names as original filled empty strings
df1 = pd.DataFrame(c, index=x.index, columns=x.columns)
# modify values of df1 column by boolean mask
df1[mask1] = c1
display(df1)
return df1
# Last line in notebook displays the styled dataframe
cat_mean.style.apply(color, axis=None)
# Last line in PyCharm saving rendered styler to file - comment out when in Jupyter
cm = cat_mean.style.apply(color, axis=None).set_precision(3).render()
# save the output to an html file
with open('cm_test.html', 'w') as f:
f.write(cm)
参考
- 此
- 这个question类似，但是没有答案。
pd.show_versions()
的输出
- 所有
None的包都没有显示为保存 space
INSTALLED VERSIONS
------------------
commit : f2c8480af2f25efdbd803218b9d87980f416563e
python : 3.8.8.final.0 or 3.9.2.final.0
python-bits : 64
OS : Windows
OS-release : 10
Version : 10.0.19041
machine : AMD64
processor : Intel64 Family 6 Model 60 Stepping 3, GenuineIntel
byteorder : little
LOCALE : English_United States.1252
pandas : 1.2.3 or 1.2.4
numpy : 1.19.2
pytz : 2021.1
dateutil : 2.8.1
pip : 21.0.1
setuptools : 52.0.0.post20210125
Cython : 0.29.22
pytest : 6.2.3
sphinx : 3.5.3
xlsxwriter : 1.3.8
lxml.etree : 4.6.3
html5lib : 1.1
jinja2 : 2.11.3
IPython : 7.22.0
pandas_datareader: 0.9.0
bs4 : 4.9.3
bottleneck : 1.3.2
fsspec : 0.9.0
matplotlib : 3.3.4
numexpr : 2.7.3
openpyxl : 3.0.7
scipy : 1.6.2
sqlalchemy : 1.4.5
tables : 3.6.1
tabulate : 0.8.9
xlrd : 2.0.1
xlwt : 1.3.0
numba : 0.53.1
解决方法
拆分数据帧
- 令人不满意，但拆分 DataFrame 并应用样式会起作用，因为如果减小整体大小。
cat_mean.iloc[:237, :].style.apply(color, axis=None)
cat_mean.iloc[237:, :].style.apply(color, axis=None)
保存到 Excel
- 保存到 Excel 时，所有行都以高亮颜色正确显示
test = cat_mean.style.apply(color, axis=None)
test.to_excel('test.xlsx', engine='openpyxl')
更新
- 自
pandas 1.3.0起，以下实现正确突出显示了 OP 中(474, 35)测试数据的所有预期列和行。- 它也成功地使用形状为
(7760, 35)的数据框进行了测试。
- 它也成功地使用形状为
- 此实现来自pandas Table Visualization User Guide: Set classes instead of using Styler functions
# also use code previous to list line for the test data
# calculate the mean for each name and cat
cat_mean = df.groupby(['name', 'cat']).mean()
def test(s, props=''):
t = np.where(s.gt(mean[s.name]), props, '')
return t
build = lambda x: pd.DataFrame(x, index=cat_mean.index, columns=cat_mean.columns)
cls1 = build(cat_mean.apply(test, props='cls-1 ', axis=0))
test = cat_mean.style.set_table_styles([{'selector': '.cls-1', 'props': [('color', 'white'), ('background-color', 'darkblue')]}]).set_td_classes(cls1)
# save the output to an html file
with open('cm_test.html', 'w') as f:
f.write(test.render())
- 工作实施的输出
- OP 中的实施输出
回答：为什么这在 Chrome 或 Edge 中不起作用？
- 根据错误 #39400，大型 DataFrame 会出现此问题，因为 Styler 将所有 CSS id 放在一个属性上，所有浏览器都无法解决。
- 在下面的小片段中，可以看到所有 ID 都在顶部。
- 虽然只包含 1 table 行的数据，但代码段 ID 为 5 行和 35 列。
<style type="text/css" >
#T__row0_col0,#T__row0_col1,#T__row0_col4,#T__row0_col5,#T__row0_col6,#T__row0_col11,#T__row0_col12,#T__row0_col13,#T__row0_col16,#T__row0_col19,#T__row0_col20,#T__row0_col22,#T__row0_col23,#T__row0_col24,#T__row0_col26,#T__row0_col27,#T__row0_col28,#T__row0_col30,#T__row0_col33,#T__row0_col34,#T__row1_col0,#T__row1_col1,#T__row1_col4,#T__row1_col8,#T__row1_col9,#T__row1_col11,#T__row1_col13,#T__row1_col15,#T__row1_col17,#T__row1_col21,#T__row1_col22,#T__row1_col26,#T__row1_col31,#T__row1_col34,#T__row2_col0,#T__row2_col1,#T__row2_col3,#T__row2_col7,#T__row2_col8,#T__row2_col9,#T__row2_col10,#T__row2_col12,#T__row2_col13,#T__row2_col16,#T__row2_col19,#T__row2_col20,#T__row2_col24,#T__row2_col26,#T__row2_col27,#T__row2_col28,#T__row2_col30,#T__row2_col32,#T__row3_col0,#T__row3_col3,#T__row3_col4,#T__row3_col6,#T__row3_col7,#T__row3_col8,#T__row3_col9,#T__row3_col15,#T__row3_col17,#T__row3_col20,#T__row3_col22,#T__row3_col27,#T__row3_col28,#T__row3_col29,#T__row3_col31,#T__row3_col34,#T__row4_col0,#T__row4_col1,#T__row4_col2,#T__row4_col3,#T__row4_col4,#T__row4_col6,#T__row4_col8,#T__row4_col14,#T__row4_col16,#T__row4_col17,#T__row4_col18,#T__row4_col19,#T__row4_col22,#T__row4_col23,#T__row4_col25,#T__row4_col27,#T__row4_col29,#T__row4_col32,#T__row4_col33{
text-align: center;
}#T__row0_col2,#T__row0_col3,#T__row0_col7,#T__row0_col8,#T__row0_col9,#T__row0_col10,#T__row0_col14,#T__row0_col15,#T__row0_col17,#T__row0_col18,#T__row0_col21,#T__row0_col25,#T__row0_col29,#T__row0_col31,#T__row0_col32,#T__row1_col2,#T__row1_col3,#T__row1_col5,#T__row1_col6,#T__row1_col7,#T__row1_col10,#T__row1_col12,#T__row1_col14,#T__row1_col16,#T__row1_col18,#T__row1_col19,#T__row1_col20,#T__row1_col23,#T__row1_col24,#T__row1_col25,#T__row1_col27,#T__row1_col28,#T__row1_col29,#T__row1_col30,#T__row1_col32,#T__row1_col33,#T__row2_col2,#T__row2_col4,#T__row2_col5,#T__row2_col6,#T__row2_col11,#T__row2_col14,#T__row2_col15,#T__row2_col17,#T__row2_col18,#T__row2_col21,#T__row2_col22,#T__row2_col23,#T__row2_col25,#T__row2_col29,#T__row2_col31,#T__row2_col33,#T__row2_col34,#T__row3_col1,#T__row3_col2,#T__row3_col5,#T__row3_col10,#T__row3_col11,#T__row3_col12,#T__row3_col13,#T__row3_col14,#T__row3_col16,#T__row3_col18,#T__row3_col19,#T__row3_col21,#T__row3_col23,#T__row3_col24,#T__row3_col25,#T__row3_col26,#T__row3_col30,#T__row3_col32,#T__row3_col33,#T__row4_col5,#T__row4_col7,#T__row4_col9,#T__row4_col10,#T__row4_col11,#T__row4_col12,#T__row4_col13,#T__row4_col15,#T__row4_col20,#T__row4_col21,#T__row4_col24,#T__row4_col26,#T__row4_col28,#T__row4_col30,#T__row4_col31,#T__row4_col34{
background-color: green;
text-align: center;
}</style><table id="T__" ><thead> <tr> <th class="blank" ></th> <th class="blank level0" ></th> <th class="col_heading level0 col0" >val1</th> <th class="col_heading level0 col1" >val2</th> <th class="col_heading level0 col2" >val3</th> <th class="col_heading level0 col3" >val4</th> <th class="col_heading level0 col4" >val5</th> <th class="col_heading level0 col5" >val6</th> <th class="col_heading level0 col6" >val7</th> <th class="col_heading level0 col7" >val8</th> <th class="col_heading level0 col8" >val9</th> <th class="col_heading level0 col9" >val10</th> <th class="col_heading level0 col10" >val11</th> <th class="col_heading level0 col11" >val12</th> <th class="col_heading level0 col12" >val13</th> <th class="col_heading level0 col13" >val14</th> <th class="col_heading level0 col14" >val15</th> <th class="col_heading level0 col15" >val16</th> <th class="col_heading level0 col16" >val17</th> <th class="col_heading level0 col17" >val18</th> <th class="col_heading level0 col18" >val19</th> <th class="col_heading level0 col19" >val20</th> <th class="col_heading level0 col20" >val21</th> <th class="col_heading level0 col21" >val22</th> <th class="col_heading level0 col22" >val23</th> <th class="col_heading level0 col23" >val24</th> <th class="col_heading level0 col24" >val25</th> <th class="col_heading level0 col25" >val26</th> <th class="col_heading level0 col26" >val27</th> <th class="col_heading level0 col27" >val28</th> <th class="col_heading level0 col28" >val29</th> <th class="col_heading level0 col29" >val30</th> <th class="col_heading level0 col30" >val31</th> <th class="col_heading level0 col31" >val32</th> <th class="col_heading level0 col32" >val33</th> <th class="col_heading level0 col33" >val34</th> <th class="col_heading level0 col34" >val35</th> </tr> <tr> <th class="index_name level0" >name</th> <th class="index_name level1" >cat</th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> </tr></thead><tbody>
<tr>
<th id="T__level0_row0" class="row_heading level0 row0" rowspan="3">Alisha Ortiz</th>
<th id="T__level1_row0" class="row_heading level1 row0" >1</th>
<td id="T__row0_col0" class="data row0 col0" >4.46</td>
<td id="T__row0_col1" class="data row0 col1" >4.62</td>
<td id="T__row0_col2" class="data row0 col2" >5.73</td>
<td id="T__row0_col3" class="data row0 col3" >6.12</td>
<td id="T__row0_col4" class="data row0 col4" >4.77</td>
<td id="T__row0_col5" class="data row0 col5" >4.73</td>
<td id="T__row0_col6" class="data row0 col6" >4.50</td>
<td id="T__row0_col7" class="data row0 col7" >6.12</td>
<td id="T__row0_col8" class="data row0 col8" >5.50</td>
<td id="T__row0_col9" class="data row0 col9" >5.92</td>
<td id="T__row0_col10" class="data row0 col10" >6.08</td>
<td id="T__row0_col11" class="data row0 col11" >4.92</td>
<td id="T__row0_col12" class="data row0 col12" >5.42</td>
<td id="T__row0_col13" class="data row0 col13" >5.38</td>
<td id="T__row0_col14" class="data row0 col14" >6.08</td>
<td id="T__row0_col15" class="data row0 col15" >5.77</td>
<td id="T__row0_col16" class="data row0 col16" >5.31</td>
<td id="T__row0_col17" class="data row0 col17" >5.58</td>
<td id="T__row0_col18" class="data row0 col18" >6.12</td>
<td id="T__row0_col19" class="data row0 col19" >4.77</td>
<td id="T__row0_col20" class="data row0 col20" >5.19</td>
<td id="T__row0_col21" class="data row0 col21" >5.96</td>
<td id="T__row0_col22" class="data row0 col22" >4.88</td>
<td id="T__row0_col23" class="data row0 col23" >5.31</td>
<td id="T__row0_col24" class="data row0 col24" >4.65</td>
<td id="T__row0_col25" class="data row0 col25" >5.88</td>
<td id="T__row0_col26" class="data row0 col26" >5.38</td>
<td id="T__row0_col27" class="data row0 col27" >5.27</td>
<td id="T__row0_col28" class="data row0 col28" >4.88</td>
<td id="T__row0_col29" class="data row0 col29" >6.35</td>
<td id="T__row0_col30" class="data row0 col30" >5.19</td>
<td id="T__row0_col31" class="data row0 col31" >5.81</td>
<td id="T__row0_col32" class="data row0 col32" >5.85</td>
<td id="T__row0_col33" class="data row0 col33" >5.46</td>
<td id="T__row0_col34" class="data row0 col34" >4.50</td>
</tr>
回答：是否有更有效的方法来应用样式？
- OP 已经建议将 DataFrame 分成几个部分。
- Pandas：Table 可视化用户指南 包含可能的 Optimizations
- 设置
uuid_len=0、cell_ids=False使文件大小稍微变小，但没有解决这个问题。s4 = Styler(cat_mean, uuid_len=0, cell_ids=False).apply(color, axis=None)- 通常 uuid 看起来像
id="T_5409d_level0_row0"，但是uuid_len=0，它看起来像id="T__level0_row0"
- 尽可能使用
table_styles：这些将 类 添加到行或列（而不是单个单元格），因此如果您有这些分组，最好使用它们。- 在 OP 的情况下，有很多行/列，设置行或列
table_styles可能不是有效的选项
- 在 OP 的情况下，有很多行/列，设置行或列
- 设置
- 有方法
set_td_classes，可以引用外部css类。 （错误修复在 1.3.0 中）- 以下使用
class的代码应该可以工作，但受到错误 #39317 的影响
- 以下使用
def test(s, props=''):
t = np.where(s.gt(mean[s.name]), props, '')
return t
build = lambda x: pd.DataFrame(x, index=cat_mean.index, columns=cat_mean.columns)
cls1 = build(cat_mean.apply(test, props='cls-1 ', axis=0))
test = cat_mean.style.set_table_styles([{'selector': '.cls-1', 'props': [('color', 'white'), ('background-color', 'darkblue')]}]).set_td_classes(cls1)
- 应该生成更像下面的 HTML，它对每个值使用
class=，而不是将所有样式化的行 ID 放在 HTML 的顶部。 - 但是，如上所述，这也有一个错误，无法正常工作
<style type="text/css" >
#T_b3f37_ .cls-1 {
color: white;
background-color: darkblue;
}</style><table id="T_b3f37_" ><thead> <tr> <th class="blank" ></th> <th class="blank level0" ></th> <th class="col_heading level0 col0" >val1</th> <th class="col_heading level0 col1" >val2</th> <th class="col_heading level0 col2" >val3</th> <th class="col_heading level0 col3" >val4</th> <th class="col_heading level0 col4" >val5</th> <th class="col_heading level0 col5" >val6</th> <th class="col_heading level0 col6" >val7</th> <th class="col_heading level0 col7" >val8</th> <th class="col_heading level0 col8" >val9</th> <th class="col_heading level0 col9" >val10</th> <th class="col_heading level0 col10" >val11</th> <th class="col_heading level0 col11" >val12</th> <th class="col_heading level0 col12" >val13</th> <th class="col_heading level0 col13" >val14</th> <th class="col_heading level0 col14" >val15</th> <th class="col_heading level0 col15" >val16</th> <th class="col_heading level0 col16" >val17</th> <th class="col_heading level0 col17" >val18</th> <th class="col_heading level0 col18" >val19</th> <th class="col_heading level0 col19" >val20</th> <th class="col_heading level0 col20" >val21</th> <th class="col_heading level0 col21" >val22</th> <th class="col_heading level0 col22" >val23</th> <th class="col_heading level0 col23" >val24</th> <th class="col_heading level0 col24" >val25</th> <th class="col_heading level0 col25" >val26</th> <th class="col_heading level0 col26" >val27</th> <th class="col_heading level0 col27" >val28</th> <th class="col_heading level0 col28" >val29</th> <th class="col_heading level0 col29" >val30</th> <th class="col_heading level0 col30" >val31</th> <th class="col_heading level0 col31" >val32</th> <th class="col_heading level0 col32" >val33</th> <th class="col_heading level0 col33" >val34</th> <th class="col_heading level0 col34" >val35</th> </tr> <tr> <th class="index_name level0" >name</th> <th class="index_name level1" >cat</th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> <th class="blank" ></th> </tr></thead><tbody>
<tr>
<th id="T_b3f37_level0_row0" class="row_heading level0 row0" rowspan="3">Adriana Mcknight</th>
<th id="T_b3f37_level1_row0" class="row_heading level1 row0" >1</th>
<td id="T_b3f37_row0_col0" class="data row0 col0 cls-1 " >5.782609</td>
<td id="T_b3f37_row0_col1" class="data row0 col1 cls-1 " >5.652174</td>
<td id="T_b3f37_row0_col2" class="data row0 col2 cls-1 " >6.130435</td>
<td id="T_b3f37_row0_col3" class="data row0 col3 cls-1 " >6.086957</td>
<td id="T_b3f37_row0_col4" class="data row0 col4" >4.478261</td>
<td id="T_b3f37_row0_col5" class="data row0 col5" >4.565217</td>
<td id="T_b3f37_row0_col6" class="data row0 col6" >5.826087</td>
<td id="T_b3f37_row0_col7" class="data row0 col7" >5.956522</td>
<td id="T_b3f37_row0_col8" class="data row0 col8" >4.782609</td>
<td id="T_b3f37_row0_col9" class="data row0 col9" >5.347826</td>
<td id="T_b3f37_row0_col10" class="data row0 col10" >5.260870</td>
<td id="T_b3f37_row0_col11" class="data row0 col11" >5.130435</td>
<td id="T_b3f37_row0_col12" class="data row0 col12" >5.217391</td>
<td id="T_b3f37_row0_col13" class="data row0 col13" >6.173913</td>
<td id="T_b3f37_row0_col14" class="data row0 col14" >5.043478</td>
<td id="T_b3f37_row0_col15" class="data row0 col15" >6.391304</td>
<td id="T_b3f37_row0_col16" class="data row0 col16" >5.217391</td>
<td id="T_b3f37_row0_col17" class="data row0 col17" >5.913043</td>
<td id="T_b3f37_row0_col18" class="data row0 col18" >5.608696</td>
<td id="T_b3f37_row0_col19" class="data row0 col19" >5.869565</td>
<td id="T_b3f37_row0_col20" class="data row0 col20" >6.086957</td>
<td id="T_b3f37_row0_col21" class="data row0 col21" >4.826087</td>
<td id="T_b3f37_row0_col22" class="data row0 col22" >5.739130</td>
<td id="T_b3f37_row0_col23" class="data row0 col23" >6.304348</td>
<td id="T_b3f37_row0_col24" class="data row0 col24" >5.347826</td>
<td id="T_b3f37_row0_col25" class="data row0 col25" >5.173913</td>
<td id="T_b3f37_row0_col26" class="data row0 col26" >4.608696</td>
<td id="T_b3f37_row0_col27" class="data row0 col27" >5.391304</td>
<td id="T_b3f37_row0_col28" class="data row0 col28" >5.652174</td>
<td id="T_b3f37_row0_col29" class="data row0 col29" >5.434783</td>
<td id="T_b3f37_row0_col30" class="data row0 col30" >5.565217</td>
<td id="T_b3f37_row0_col31" class="data row0 col31" >5.956522</td>
<td id="T_b3f37_row0_col32" class="data row0 col32" >6.043478</td>
<td id="T_b3f37_row0_col33" class="data row0 col33" >5.217391</td>
<td id="T_b3f37_row0_col34" class="data row0 col34 cls-1 " >5.521739</td>
</tr>