熊猫数据帧显示在网页上

Question

我正在使用Flask，但这可能适用于许多类似的框架。

我构建了一个熊猫数据帧，例如

@app.route('/analysis/<filename>')
def analysis(filename):
    x = pd.DataFrame(np.random.randn(20, 5))
    return render_template("analysis.html", name=filename, data=x)

模板分析.html看起来像

{% extends "base.html" %}
{% block content %}
<h1>{{name}}</h1>
{{data}}
{% endblock %}

这有效，但输出看起来很糟糕。它不使用换行符等。我玩过data.to_html()，data.to_string()显示框架的最简单方法是什么？

Answer 1

以下方法应该有效：

@app.route('/analysis/<filename>')
def analysis(filename):
    x = pd.DataFrame(np.random.randn(20, 5))
    return render_template("analysis.html", name=filename, data=x.to_html())
                                                                # ^^^^^^^^^

查看文档以获取其他选项，例如 CSS 样式。

此外，您需要像这样调整模板：

{% extends "base.html" %}
{% block content %}
<h1>{{name}}</h1>
{{data | safe}}
{% endblock %}

为了告诉金贾你正在通过标记。感谢@SeanVieira的小费。

Answer 2

好的，通过现在结合我在这里得到的提示，我已经设法获得了一些非常好的结果。在我使用的实际 Python 查看器中

@app.route('/analysis/<filename>')
def analysis(filename):
    x = pd.DataFrame(np.random.randn(20, 5))
    return render_template("analysis.html", name=filename, data=x)

例如，我将完整的数据帧发送到 html 模板。我的 html 模板基于引导程序。因此我可以简单地写

{% extends "base.html" %}
{% block content %}
<h1>{{name}}</h1>
{{ data.to_html(classes="table table-striped") | safe}}
{% endblock %}

引导还有许多其他选项，请在此处查看：http://getbootstrap.com/css/#tables

Base.html基本上是从这里复制的http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-xii-facelift

下一个问题显然是如何绘制这样的帧。有人有散景经验吗？

谢谢马特和肖恩。

托马斯

Answer 3

遍历 df 的行

如果需要使df采用可以迭代 html 中行的格式，请使用 to_dict(orient='records') ，它将生成以下格式的dict：

‘records’ : list like [{column -> value}, … , {column -> value}]

这样，您就可以使用自己的方式在 html 中显示数据。示例代码现在如下所示：

使用烧瓶的 Python 代码

@app.route('/analysis/<filename>')
def analysis(filename):
    x = pd.DataFrame(np.random.randn(20, 5))
    return render_template("analysis.html", name=filename, data=x.to_dict(orient='records'))

带有jinja的HTML代码

{% extends "base.html" %}
    {% block content %}
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Column name 1</th>
                <th scope="col">Column name 2</th>
                <th scope="col">Column name 3</th>
            </tr>
        </thead>
        <tbody>
        {% for row in data %}
            <tr>
                <td>{{row['Column name 1']}}</td>
                <td>{{row['Column name 2']}}</td>
                <td>{{row['Column name 2']}}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% endblock %}

Answer 4

您可以使用 enaml-web 来显示 pandas 数据帧并与之交互。

举几个例子：

• 带过滤 - https://github.com/frmdstryr/smd-search
• 简单查看器 - https://github.com/codelv/enaml-web/tree/master/examples/dataframe_viewer

注意：交互（排序、过滤等）需要支持 websocket 的服务器。