Bokeh DataTable not show in Flask

问题

I am developing a Flask web application to show data in a DataTable and also build interactive reports by Bokeh. My below code to show bokeh DataTable not work.

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)

my html file is as below:

<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>

My web application only shows heading "Iris Data Table version 5" but not the Bokeh DataTable also no error message.

I cannot figure where is wrong, appreciate your help.

回答1:

You are not including the JS/CSS files for tables. They are relatively large, so they are split into their own files so people that don't make use of tables don't have to pay the cost of loading the resources. Below is a working template. Note I have also updated the CDN urls to point at cdn.bokeh.org. The old locations will work indefinitely, but anyone who can should use the new locations.

<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>

来源：https://stackoverflow.com/questions/58721402/bokeh-datatable-not-show-in-flask

标签

python

Flask

bokeh