散景数据表未在烧瓶中显示

问题描述 投票：0回答：2

我正在开发一个Flask Web应用程序，以在DataTable中显示数据，还由Bokeh构建交互式报表。我下面的代码显示bokeh DataTable不起作用。 

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.pydata.org/bokeh/release/bokeh-0.12.16.min.css"
    rel="stylesheet" type="text/css">
<link
    href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.css"
    rel="stylesheet" type="text/css">

<script src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.js"></script>
<script src="http://cdn.pydata.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>

我的Web应用程序仅显示标题“ AllItems_bokehtable”，但不显示Bokeh DataTable，也没有错误消息。

我不知道哪里出了问题，感谢您的帮助。

python flask bokeh
2个回答
0
投票

您不包括表格的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>
0
投票

您不包括表格的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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.