Question

很抱歉，如果这个问题在StackOverflow的其他地方得到了回答，我会尽力在发布此问题之前寻找答案。

我正在使用Bokeh创建一个基于Flask的Web应用程序，以便在工作中进行数据可视化。我使用bokeh.embed.components和bokeh.plotting.figure嵌入散点图/线图没有问题。

我想在绘图下方的DataTable小部件中显示用于制作绘图的数据。不幸的是，使用组件生成脚本和div似乎不适用于小部件。使用bokeh.layouts创建的列，行或布局时，组件似乎也会失败。

我的代码的总体布局是一个Python文件，其中包含我的Flask应用程序；一个HTML文件，其包含我的网页布局。 Python文件的总体布局如下：

from flask import Flask, render_template
import pandas as pd
import numpy as np
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, TableColumn
from bokeh.plotting import figure
from bokeh.layouts import widgetbox, column
from bokeh.embed import components

app = Flask(__name__)
x = np.linspace(0, 2, 1000)
y = np.sin(x)
df = pd.DataFrame({"x": x, "y":y}) # Not sure how to provide sample data

@app.route("/")
def index():
    p = figure()
    p.scatter(df['x'], df['y'])

    data_source = ColumnDataSource(df)
    columns = [
        TableColumn(field="field1", title="Field 1"),
        TableColumn(field="field2", title="Field 2"),
        TableColumn(field="field3", title="Field 3"),
    ]

    data_table = DataTable(source=data_source, columns=columns)
    script, div = components(column(p, widgetbox(data_table)))
    return render_template('sample.html', script=script, div=div)

HTML模板（“ sample.html”）如下所示：

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

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

</head>
<body>
{{ script|safe }}
{{ div|safe }}
</body>
</html>

我选择使用简单的正弦波作为此代码的示例数据，但在现实生活中，我在将Web应用程序连接到数据库之前使用Excel文件（pd.read_excel）测试代码。 / p>

在Python代码中，如果我替换

script, div = components(column(p, widgetbox(data_table))

使用

script, div = components(p)

代码完美运行。因此，这使我相信问题在于嵌入窗口小部件或地块和窗口小部件的布局。预先感谢您可能提供的任何帮助。

Answer 1

对于我值得的，我意识到我的原始代码出了什么问题。显然，在将DataTables与组件一起使用时，需要链接到CSS和JS的bokeh表。以下是相关的链接和脚本标签。

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

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

Answer 2

下面的代码正确显示了Bokeh v1.0.4的绘图和表格

import numpy as np
import pandas as pd
import webbrowser
from flask import Flask, render_template
from tornado.ioloop import IOLoop
from bokeh.application import Application
from bokeh.application.handlers import FunctionHandler
from bokeh.embed import server_document
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure
from bokeh.models.widgets import DataTable, TableColumn
from bokeh.server.server import Server
from bokeh.layouts import column

app = Flask(__name__)
port = 5001

def get_plot(doc):
    x = np.linspace(0, 2, 1000)
    y = np.sin(x)
    df = pd.DataFrame({"x": x, "y":y})  # Not sure how to provide sample data

    def get_plot():
        p = figure()
        p.scatter(df['x'], df['y'])
        data_source = ColumnDataSource(df)
        columns = [ TableColumn(field = "field1", title = "Field 1"),
                    TableColumn(field = "field2", title = "Field 2"),
                    TableColumn(field = "field3", title = "Field 3"), ]
        data_table = DataTable(source = data_source, columns = columns)

        return column(p, data_table)

    doc.add_root(get_plot())
    doc.title = "Flask App Plot"

bokeh_app = Application(FunctionHandler(get_plot))

@app.route('/', methods = ['GET'])
def index():
    script = server_document('http://localhost:5006/bkapp')
    return render_template("index.html", script = script)

def bk_worker():
    server = Server({'/bkapp': bokeh_app}, io_loop = IOLoop(), allow_websocket_origin = ["localhost:{}".format(port)], port = port)
    server.start()
    server.io_loop.start()

from threading import Thread
Thread(target = bk_worker).start()

if __name__ == '__main__':
    print('Opening single process Flask app with embedded Bokeh application on http://localhost:{}/'.format(port))
    webbrowser.open_new("http://localhost:{}/".format(port))
    app.run(port = port, debug = False)

结果：

如何在Python Flask Web应用程序中嵌入DataTable小部件

2 个答案: