【问题标题】:Bokeh DataTable not show in FlaskBokeh DataTable 未显示在 Flask 中
【发布时间】:2020-03-02 10:05:58
【问题描述】:

我正在开发一个 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”,但不显示散景数据表,也没有错误消息。

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

【问题讨论】:

  • 0.12.16 真的是你安装的 Bokeh 版本吗?
  • 是的,我检查了散景版本。
  • 浏览器 JS 控制台或网络调试选项卡中的错误/消息?
  • 您也可以尝试将表格作为某些布局中的唯一项目(例如column)内存可能已关闭)
  • @bigreddot 谢谢,浏览器没有错误,sublime text py 控制台也没有错误。它只是没有显示表格:(

标签: python flask bokeh


【解决方案1】:

您没有包含表格的 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>

【讨论】:

  • 太棒了!!!!非常感谢,它正在工作!!!对于错误的帖子作为答案感到抱歉,有时只是不知道该怎么做。
  • 我想知道您是否可以帮助我的另一张票“如何在散景表中删除 NaN” -- stackoverflow.com/questions/58654241/… 非常感谢。
猜你喜欢
  • 2016-06-27
  • 2016-09-02
  • 1970-01-01
  • 2016-10-15
  • 1970-01-01
  • 2020-01-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多