时间戳

首页 > 解决方案 > Bokeh DataTable 未显示在 Flask 中

python - Bokeh DataTable 未显示在 Flask 中

问题描述

我正在开发一个 Flask Web 应用程序来显示 DataTable 中的数据，并通过 Bokeh 构建交互式报告。我下面的代码显示散景数据表不起作用。

from flask import Flask, render_template, request
import pandas as pd
from bokeh.embed import components
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn
from bokeh.models.sources import ColumnDataSource

app = Flask(__name__)

# Load the Iris Data Set
iris_df = pd.read_csv("/data/iris.data", names=["Sepal Length", "Sepal Width", "Petal Length", "Petal Width", "Species"])

@app.route('/ShowIrisDataTable/')
def index():

    cols = [
        TableColumn(field='Sepal Length', title='Sepal Length'),
        TableColumn(field='Sepal Width', title='Sepal Width'), 
        TableColumn(field='Petal Length', title='Petal Length'), 
        TableColumn(field='Petal Width', title='Petal Width'), 
        TableColumn(field='Species', title='Species')
    ]     
    data_table = DataTable(columns=cols, source=ColumnDataSource(iris_df), fit_columns=True)

    script, div = components(data_table)        

    return render_template("iris_index5.html", script=script, div=div)

if __name__ == '__main__':
    app.run(port=5000, debug=True)

我的html文件如下：

<html>
<head>
<link
    href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.16.min.css"
    rel="stylesheet" type="text/css">
<link
    href="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.16.min.css"
    rel="stylesheet" type="text/css">

<script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.16.min.js"></script>
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.16.min.js"></script>

</head>
<body>
<H1>Iris Data Table version 5</H1>

{{ script|safe }}
{{ div|safe }}


</body>
</html>

我的网络应用程序只显示标题“虹膜数据表版本 5”，但不显示散景数据表，也没有错误消息。

我不知道哪里错了，感谢您的帮助。

标签： pythonflaskbokeh

解决方案

您不包括表格的 JS/CSS 文件。它们相对较大，因此它们被拆分为自己的文件，因此不使用表的人不必支付加载资源的成本。下面是一个工作模板。请注意，我还更新了 CDN 网址以指向cdn.bokeh.org. 旧位置将无限期使用，但任何可以使用新位置的人都应该使用。

<html>
<head>

<link
    href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.16.min.css"
    rel="stylesheet" type="text/css">
<link
    href="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.16.min.css"
    rel="stylesheet" type="text/css">

<link
    href="http://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.16.min.css"
    rel="stylesheet" type="text/css">

<script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.16.min.js"></script>
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.16.min.js"></script>
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.16.min.js"></script>

</head>
<body>
<H1>Iris Data Table version 5</H1>

{{ script|safe }}
{{ div|safe }}

</body>
</html>

推荐阅读