复制Jupyter Notebook Pandas数据框HTML打印输出

tony 发表于 Dev

托尼

我正在尝试将jupyter用于其笔记本中的熊猫数据框的输出复制到html / css / js，以便Flask可以将其返回jsonify为html，稍后在AJAX调用中使用。

我发现了this和this，这建议使用pandas内置样式功能而不是CSS hack，但是我正在努力获得所需的功能：

def hover(hover_color="#add8e6"):
    return dict(selector="tr:hover",
                props=[("background-color", "%s" % hover_color)])

styles = [
    hover(),
    dict(selector="th", props=[("font-size", "125%"),
                               ("text-align", "center"),
                               ("padding", "5px 5px")]),
    dict(selector="tr", props=[("text-align", "center")]),
    dict(selector="caption", props=[("caption-side", "bottom")])
]

# creating some dummy data
index = pd.MultiIndex(levels=[['bar', 'baz', 'foo', 'qux'], ['one', 'two']],
                      labels=[[0, 0, 1, 1, 2, 2, 3, 3], [0, 1, 0, 1, 0, 1, 0, 1]],
                      names=['first', 'second'])

df = pd.DataFrame(data=np.random.randn(8), index=index)

# you'll see the html rendered bellow
df.style.set_table_styles(styles).set_caption("test").render()

与jupyter笔记本相比，这缺少一些默认的背景色去除，并且标题不应该应用悬停类。我能想到的在选择元素上应用某些东西的唯一方法是添加class=或id=样式功能将所有内容隐藏起来。

<style  type="text/css" >     #T_479b61ba_292a_11e8_86bf_0ee09a5428a2 tr:hover {           background-color: #add8e6;     }    #T_479b61ba_292a_11e8_86bf_0ee09a5428a2 th {           font-size: 150%;           text-align: center;     }    #T_479b61ba_292a_11e8_86bf_0ee09a5428a2 caption {           caption-side: bottom;     }</style>   <table id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2" ><caption>Hover to highlight.</caption>  <thead>    <tr>          <th class="blank" ></th>          <th class="blank level0" ></th>          <th class="col_heading level0 col0" >0</th>      </tr>    <tr>          <th class="index_name level0" >first</th>          <th class="index_name level1" >second</th>          <th class="blank" ></th>      </tr></thead>  <tbody>    <tr>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level0_row0" class="row_heading level0 row0" rowspan=2>bar</th>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row0" class="row_heading level1 row0" >one</th>          <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row0_col0" class="data row0 col0" >-0.0690895</td>      </tr>    <tr>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row1" class="row_heading level1 row1" >two</th>          <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row1_col0" class="data row1 col0" >-0.518092</td>      </tr>    <tr>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level0_row2" class="row_heading level0 row2" rowspan=2>baz</th>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row2" class="row_heading level1 row2" >one</th>          <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row2_col0" class="data row2 col0" >-0.163842</td>      </tr>    <tr>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row3" class="row_heading level1 row3" >two</th>          <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row3_col0" class="data row3 col0" >-0.144757</td>      </tr>    <tr>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level0_row4" class="row_heading level0 row4" rowspan=2>foo</th>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row4" class="row_heading level1 row4" >one</th>          <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row4_col0" class="data row4 col0" >1.22865</td>      </tr>    <tr>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row5" class="row_heading level1 row5" >two</th>          <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row5_col0" class="data row5 col0" >1.83947</td>      </tr>    <tr>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level0_row6" class="row_heading level0 row6" rowspan=2>qux</th>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row6" class="row_heading level1 row6" >one</th>          <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row6_col0" class="data row6 col0" >0.793328</td>      </tr>    <tr>          <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row7" class="row_heading level1 row7" >two</th>          <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row7_col0" class="data row7 col0" >-0.723836</td>      </tr></tbody>  </table>

劳伦·奥尔贾（Lauren Oldja）

我对您的代码进行了一些更改，以获得所需的功能：

Pandas数据框使用两个特殊的HTML标记来设置表格样式，即表thead头和tbody主体。我们可以使用它来指定突出显示行为为仅身体
CSS具有“偶数”和“奇数”属性，可用于向表添加阴影效果。
为了使悬停与指定的背景阴影配合使用，必须将其最后调用而不是首先调用

在Jupyter Notebook中：

import pandas as pd
import numpy as np
from IPython.display import HTML

def hover(hover_color="#add8e6"):
    return dict(selector="tbody tr:hover",
            props=[("background-color", "%s" % hover_color)])

styles = [
    #table properties
    dict(selector=" ", 
         props=[("margin","0"),
                ("font-family",'"Helvetica", "Arial", sans-serif'),
                ("border-collapse", "collapse"),
                ("border","none"),
                ("border", "2px solid #ccf")
                   ]),

    #header color - optional
    dict(selector="thead", 
         props=[("background-color","#cc8484")
               ]),

    #background shading
    dict(selector="tbody tr:nth-child(even)",
         props=[("background-color", "#fff")]),
    dict(selector="tbody tr:nth-child(odd)",
         props=[("background-color", "#eee")]),

    #cell spacing
    dict(selector="td", 
         props=[("padding", ".5em")]),

    #header cell properties
    dict(selector="th", 
         props=[("font-size", "125%"),
                ("text-align", "center")]),

    #caption placement
    dict(selector="caption", 
         props=[("caption-side", "bottom")]),

    #render hover last to override background-color
    hover()
]
html = (df.style.set_table_styles(styles)
      .set_caption("Hover to highlight."))
html

...但是当我们输出HTML文件时，它仍然很漂亮吗？是。您可以做一些其他的CSS样式来使它正确（字体大小，字体系列，文本装饰，边距/填充等），但这为您提供了一个开始。见下文：

print(html.render())

<style  type="text/css" >
    #T_3e73cfd2_396c_11e8_9d70_240a645b34fc   {
          margin: 0;
          font-family: "Helvetica", "Arial", sans-serif;
          border-collapse: collapse;
          border: none;
          border: 2px solid #ccf;
    }    #T_3e73cfd2_396c_11e8_9d70_240a645b34fc thead {
          background-color: #cc8484;
    }    #T_3e73cfd2_396c_11e8_9d70_240a645b34fc tbody tr:nth-child(even) {
          background-color: #fff;
    }    #T_3e73cfd2_396c_11e8_9d70_240a645b34fc tbody tr:nth-child(odd) {
          background-color: #eee;
    }    #T_3e73cfd2_396c_11e8_9d70_240a645b34fc td {
          padding: .5em;
    }    #T_3e73cfd2_396c_11e8_9d70_240a645b34fc th {
          font-size: 125%;
          text-align: center;
    }    #T_3e73cfd2_396c_11e8_9d70_240a645b34fc caption {
          caption-side: bottom;
    }    #T_3e73cfd2_396c_11e8_9d70_240a645b34fc tbody tr:hover {
          background-color: #add8e6;
    }</style>  
<table id="T_3e73cfd2_396c_11e8_9d70_240a645b34fc" ><caption>Hover to highlight.</caption> 
<thead>    <tr> 
        <th class="blank" ></th> 
        <th class="blank level0" ></th> 
        <th class="col_heading level0 col0" >0</th> 
    </tr>    <tr> 
        <th class="index_name level0" >first</th> 
        <th class="index_name level1" >second</th> 
        <th class="blank" ></th> 
    </tr></thead> 
<tbody>    <tr> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel0_row0" class="row_heading level0 row0" rowspan=2>bar</th> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row0" class="row_heading level1 row0" >one</th> 
        <td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow0_col0" class="data row0 col0" >-0.130634</td> 
    </tr>    <tr> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row1" class="row_heading level1 row1" >two</th> 
        <td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow1_col0" class="data row1 col0" >1.17685</td> 
    </tr>    <tr> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel0_row2" class="row_heading level0 row2" rowspan=2>baz</th> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row2" class="row_heading level1 row2" >one</th> 
        <td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow2_col0" class="data row2 col0" >0.500367</td> 
    </tr>    <tr> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row3" class="row_heading level1 row3" >two</th> 
        <td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow3_col0" class="data row3 col0" >0.555932</td> 
    </tr>    <tr> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel0_row4" class="row_heading level0 row4" rowspan=2>foo</th> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row4" class="row_heading level1 row4" >one</th> 
        <td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow4_col0" class="data row4 col0" >-0.744553</td> 
    </tr>    <tr> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row5" class="row_heading level1 row5" >two</th> 
        <td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow5_col0" class="data row5 col0" >-1.41269</td> 
    </tr>    <tr> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel0_row6" class="row_heading level0 row6" rowspan=2>qux</th> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row6" class="row_heading level1 row6" >one</th> 
        <td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow6_col0" class="data row6 col0" >0.726728</td> 
    </tr>    <tr> 
        <th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row7" class="row_heading level1 row7" >two</th> 
        <td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow7_col0" class="data row7 col0" >-0.683555</td> 
    </tr></tbody> 
</table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。