Отображение данных в формате Python HTML вне jupyter - PullRequest
Новая
       32

Отображение данных в формате Python HTML вне jupyter

0 голосов
/ 22 февраля 2019

Я хотел бы создать HTML-файл (скажем, «my_file.html»), содержащий фрейм данных, и я хотел бы иметь разметку, аналогичную dataFrame Jupyter, то есть 

from IPython.display import display
from pandas import Timestamp
df = pd.DataFrame({'new': {Timestamp('2008-09-01 00:00:00'): 0.0,
                           Timestamp('2008-09-02 00:00:00'): -0.0},
                   'old': {Timestamp('2008-09-01 00:00:00'): 0.0,
                           Timestamp('2008-09-02 00:00:00'): -0.0},
                   'diff':{Timestamp('2008-09-01 00:00:00'): 0.0,
                           Timestamp('2008-09-02 00:00:00'): 0.0}})
display(df)

Но когда я это сделаю 

df.to_html('my_file.html')

Рендинг - это простая таблица без форматирования Jupyter 

<div>
<style scoped>
    .dataframe tbody tr th:only-of-type {
        vertical-align: middle;
    }

    .dataframe tbody tr th {
        vertical-align: top;
    }

    .dataframe thead th {
        text-align: right;
    }
</style>
<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: center;">
      <th></th>
      <th>new</th>
      <th>old</th>
      <th>diff</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>2008-09-01</th>
      <td>0.0000</td>
      <td>0.0000</td>
      <td>0.0000</td>
    </tr>
    <tr>
      <th>2008-09-02</th>
      <td>-0.0000</td>
      <td>-0.0000</td>
      <td>0.0000</td>
    </tr>
  </tbody>
</table>
</div>

Есть идеи, как изменить код, чтобы дисплей был похож на Jupyter?

1 Ответ

0 голосов
/ 22 февраля 2019

Таблица стилей Jupyter CSS является причиной красивой таблицы.Вы можете скопировать соответствующие css правила из index.css файла Jupyter.После создания таблицы стилей, оберните вывод df.to_html() внутри <div>. 

<div class="p-Widget jp-RenderedHTMLCommon jp-RenderedHTML jp-mod-trusted jp-OutputArea-output" data-mime-type="text/html">
<!-- Output of df.to_html() -->
</div>

Вот таблица с созданным примером: 

/* jupyterlab/packages/theme-light-extension/style/variables.css */
:root {
  --jp-ui-font-color0: rgba(0, 0, 0, 1);
  --jp-ui-font-color1: rgba(0, 0, 0, 0.87);
  --jp-layout-color0: white;
  --jp-rendermime-error-background: #fdd;
  --jp-rendermime-table-row-background: #ddd;
  --jp-rendermime-table-row-hover-background: #aaa;
}

/* Tables */
.jp-RenderedHTMLCommon table {
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
  color: var(--jp-ui-font-color1);
  font-size: 12px;
  table-layout: fixed;
  margin-left: auto;
  margin-right: auto;
}

.jp-RenderedHTMLCommon thead {
  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
  vertical-align: bottom;
}

.jp-RenderedHTMLCommon td,
.jp-RenderedHTMLCommon th,
.jp-RenderedHTMLCommon tr {
  vertical-align: middle;
  padding: 0.5em 0.5em;
  line-height: normal;
  white-space: normal;
  max-width: none;
  border: none;
}

.jp-RenderedMarkdown.jp-RenderedHTMLCommon td,
.jp-RenderedMarkdown.jp-RenderedHTMLCommon th {
  max-width: none;
}

:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon td,
:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon th,
:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon tr {
  text-align: right;
}

.jp-RenderedHTMLCommon th {
  font-weight: bold;
}

.jp-RenderedHTMLCommon tbody tr:nth-child(odd) {
  background: var(--jp-layout-color0);
}

.jp-RenderedHTMLCommon tbody tr:nth-child(even) {
  background: var(--jp-rendermime-table-row-background);
}

.jp-RenderedHTMLCommon tbody tr:hover {
  background: var(--jp-rendermime-table-row-hover-background);
}

.jp-RenderedHTMLCommon table {
  margin-bottom: 1em;
}

.jp-RenderedHTMLCommon p {
  text-align: left;
  margin: 0px;
}

.jp-RenderedHTMLCommon p {
  margin-bottom: 1em;
}
<div class="p-Widget jp-RenderedHTMLCommon jp-RenderedHTML jp-mod-trusted jp-OutputArea-output" data-mime-type="text/html">
<style scoped="">
    .dataframe tbody tr th:only-of-type {
        vertical-align: middle;
    }

    .dataframe tbody tr th {
        vertical-align: top;
    }

    .dataframe thead th {
        text-align: right;
    }
</style>
<table class="dataframe" border="1">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>new</th>
      <th>old</th>
      <th>diff</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>2008-09-01</th>
      <td>0.0</td>
      <td>0.0</td>
      <td>0.0</td>
    </tr>
    <tr>
      <th>2008-09-02</th>
      <td>-0.0</td>
      <td>-0.0</td>
      <td>0.0</td>
    </tr>
  </tbody>
</table>
</div>
...