如果这个问题在 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.bokeh.org/bokeh/release/bokeh-1.0.4.min.css"
rel="stylesheet" type="text/css">
<link
href="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.0.4.min.css"
rel="stylesheet" type="text/css">
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-1.0.4.min.js"></script>
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.0.4.min.js"></script>
</head>
<body>
{{ script|safe }}
{{ div|safe }}
</body>
</html>
我选择使用简单的正弦波作为此代码的示例数据，但在现实生活中，我在将 Web 应用程序连接到数据库之前使用 Excel 文件 (pd.read_excel) 来测试代码。
在Python代码中，如果我替换
script, div = components(column(p, widgetbox(data_table))
与
script, div = components(p)
代码完美运行。因此，这让我相信问题在于嵌入小部件或绘图和小部件的布局。预先感谢您能够提供的任何帮助。
最佳答案
无论如何，我意识到我的原始代码有什么问题。显然，在将 DataTable 与组件一起使用时，需要链接到 bokeh 表的 CSS 和 JS。下面是相关的链接和脚本标签。
<link
href="http://cdn.bokeh.org/bokeh/release/bokeh-tables-1.0.4.min.css"
rel="stylesheet" type="text/css">
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-tables-1.0.4.min.js"></script>
关于python - 如何在 Python Flask Web 应用程序中嵌入 DataTable 小部件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55301063/