散景数据表未在Flask中显示 [英] Bokeh DataTable not show in Flask
问题描述
我正在开发一个Flask Web应用程序，以在DataTable中显示数据，还通过Bokeh构建交互式报表.我下面的代码显示bokeh DataTable不起作用.
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)
我的html文件如下:
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>
我的Web应用程序仅显示标题虹膜数据表版本5"，但没有显示Bokeh数据表，也没有错误消息.
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.
推荐答案
您不包括表格的JS/CSS文件.它们相对较大，因此将它们拆分为自己的文件，因此不使用表的人员不必支付加载资源的费用.以下是一个工作模板.注意，我还更新了CDN URL，使其指向cdn.bokeh.org.旧位置将无限期地运行，但是任何可以使用新位置的人都可以使用.
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>
这篇关于散景数据表未在Flask中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
