如何将熊猫数据框显示到现有的烧瓶 html 表中?

Posted

技术标签:

【中文标题】如何将熊猫数据框显示到现有的烧瓶 html 表中?【英文标题】:How to show a pandas dataframe into a existing flask html table? 【发布时间】:2019-03-09 16:29:46 【问题描述】:

这听起来可能是一个菜鸟问题,但我坚持使用它,因为 Python 不是我最好的语言之一。

我有一个 html 页面,里面有一个表格,我想在其中显示一个 pandas 数据框。 最好的方法是什么?使用 pandasdataframe.to_html?

py

from flask import Flask;
import pandas as pd;
from pandas import DataFrame, read_csv;

file = r'C:\Users\myuser\Desktop\Test.csv'
df = pd.read_csv(file)
df.to_html(header="true", table_id="table")

html

<div class="table_entrances" style="overflow-x: auto;">

  <table id="table">

    <thead></thead> 
    <tr></tr>

  </table>

</div>

【问题讨论】:

【参考方案1】:

工作示例:

python 代码:

from flask import Flask, request, render_template, session, redirect
import numpy as np
import pandas as pd


app = Flask(__name__)

df = pd.DataFrame('A': [0, 1, 2, 3, 4],
                   'B': [5, 6, 7, 8, 9],
                   'C': ['a', 'b', 'c--', 'd', 'e'])


@app.route('/', methods=("POST", "GET"))
def html_table():

    return render_template('simple.html',  tables=[df.to_html(classes='data')], titles=df.columns.values)



if __name__ == '__main__':
    app.run(host='0.0.0.0')

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

% for table in tables %
            titles[loop.index]
             table|safe 
% endfor %
</body>
</html>

否则使用

return render_template('simple.html',  tables=[df.to_html(classes='data', header="true")])

并从 html 中删除 titles[loop.index]

如果您检查 html 上的元素

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="">


            <table border="1" class="dataframe data">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>0</td>
      <td>5</td>
      <td>a</td>
    </tr>
    <tr>
      <th>1</th>
      <td>1</td>
      <td>6</td>
      <td>b</td>
    </tr>
    <tr>
      <th>2</th>
      <td>2</td>
      <td>7</td>
      <td>c--</td>
    </tr>
    <tr>
      <th>3</th>
      <td>3</td>
      <td>8</td>
      <td>d</td>
    </tr>
    <tr>
      <th>4</th>
      <td>4</td>
      <td>9</td>
      <td>e</td>
    </tr>
  </tbody>
</table>


</body></html>

如您所见,它在表格 html 中有 tbody 和 thead。这样您就可以轻松应用 css。

【讨论】:

感谢 Nihal,完成了 Python webapp 课程,我们被告知要试验我们的第一个构建。首先想到的是在网站上显示数据框。工作得很好(虽然没有 css 很丑!) 知道如何不显示行索引吗? 使用df.to_html(index = False) 知道我们为什么要使用“安全”吗? 'table|safe' 是什么意思?它有什么作用? @DavidGladson check this link【参考方案2】:

如果有人觉得这很有帮助。我选择了另一种方法,因为我需要更多的自定义,包括在表格中添加执行操作的按钮的能力。我也真的不喜欢标准表格格式,因为它非常难看恕我直言。

...

df = pd.DataFrame('Patient Name': ["Some name", "Another name"],
                       "Patient ID": [123, 456],
                       "Misc Data Point": [8, 53])
...

# link_column is the column that I want to add a button to
return render_template("patient_list.html", column_names=df.columns.values, row_data=list(df.values.tolist()),
                           link_column="Patient ID", zip=zip)

HTML 代码:这会将任何 DF 动态转换为可自定义的 HTML 表格

<table>
    <tr>
        % for col in column_names %
        <th>col</th>
        % endfor %
    </tr>
    % for row in row_data %
    <tr>
        % for col, row_ in zip(column_names, row) %
        % if col == link_column %
        <td>
            <button type="submit" value= row_  name="person_id" form="patient_form" class="patient_button">
                 row_ 
            </button>
        </td>
        % else %
        <td>row_</td>
        % endif %
        % endfor %
    </tr>
    % endfor %

</table>

CSS 代码

table 
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;


td, th 
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;


tr:nth-child(even) 
    background-color: #dddddd;

它的性能非常好,看起来比.to_html 输出要好。

【讨论】:

我应该把css放在哪里?文件名?【参考方案3】:
# Declare table
class SomeTable(Table):
    status = Col('Customer')
    city = Col('City')
    product_price = Col('Country')    

# Convert the pandas Dataframe into dictionary structure
output_dict = output.to_dict(orient='records')  

# Populate the table
table = SomeTable(output_dict)

return (table.__html__())

或者当 pandas 返回静态 HTML 文件时,您可以使用 Flask 将其呈现为页面

@app.route('/<string:filename>/')
def render_static(filename):
    return render_template('%s.html' % filename)

这是我们如何在 Flask 中做到这一点的想法。希望您能理解这一点,如果没有帮助,请告诉我!

更新:

import pandas as pd

df = pd.DataFrame('col1': ['abc', 'def', 'tre'],
                   'col2': ['foo', 'bar', 'stuff'])


from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return df.to_html(header="true", table_id="table")

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)

但我会使用 Flask HTML 功能而不是 DataFrame 到 HTML(由于样式)

【讨论】:

html代码呢?我不应该给他一个 ID 以便将这个表格加载到我网页的正确位置吗?甚至在新的数据帧出现时更新它? 你可以留下 HTML 代码,只创建一个返回 df.to_html 的函数,另一个函数将在 web 中呈现 html。 如果我们使用HTML代码,我们需要把它放在哪里?在 dockerfile 旁边?【参考方案4】:

对于那些寻找一个简单/简洁的例子来获取 Pandas df 并变成 Flask/Jinja 表的人(这就是我最终提出这个问题的原因):

APP.PY -- 应用工厂:

## YOUR DF LOGIC HERE 

@app.route("/")
def home():
    return render_template('index.html' column_names=df.columns.values, row_data=list(df.values.tolist()), zip=zip)

您的静态模板(例如 index.html)

 <table>
        <thead>

          <tr>
            % for col in column_names %
            <th>
            
              col
             
            </th>
            % endfor %
          </tr>

        </thead>
        <tbody>
          % for row in row_data %
          <tr>
            % for col, row_ in zip(column_names, row) %
            <td>row_</td>
            % endfor %
          </tr>
          % endfor %

         
        </tbody>
  
      </table>
   

【讨论】:

【参考方案5】:

对我来说使用 Jinja 的 for 循环

% for table in tables %
            titles[loop.index]
             table|safe 
% endfor %

没有工作,因为它只是逐个打印每个字符。我只需要使用

 table|safe 

【讨论】:

知道我们为什么要使用“安全”吗? 'table|safe' 是什么意思?它有什么作用? @DavidGladson 安全过滤器将字符串显式标记为“安全”,即,如果启用了自动转义,则不应自动转义。有关更多信息,请参阅文档 jinja.palletsprojects.com/en/2.10.x/templates/… 和此 SO ***.com/questions/12341496/jinja-2-safe-keyword

以上是关于如何将熊猫数据框显示到现有的烧瓶 html 表中?的主要内容,如果未能解决你的问题,请参考以下文章

无法将熊猫数据框附加到现有的 Excel 工作表

使用类创建的数据无法通过烧瓶应用程序显示到 html 中

如何将 Mailchimp 添加到现有的注册框

pandas 数据框的颜色行并转换为 HTML 表

如何摆脱熊猫将excel表中的大数转换为指数?

从字典中添加具有映射值的新熊猫列[重复]