嵌入式散景数据表未在 Django 中显示

Posted

技术标签:

【中文标题】嵌入式散景数据表未在 Django 中显示【英文标题】:Embedded Bokeh DataTable not showing in Django 【发布时间】:2020-06-02 00:58:33 【问题描述】:

我开发了一个 Django Web 应用程序,显示由 Bokeh 生成的交互式地图,并使用“组件”(来自 bokeh.embed)作为脚本/div 发送到模板。所有项目(图形、滑块、标题)都正确显示,除了 DataTable,我可以在独立文档或 Jupyter 中显示,但不能在“组件”中显示。

我已阅读Bokeh DataTable not show in Flask、Embedding bokeh plot and datatable in flask 和其他主题,它们帮助我修复了 JS/CSS 链接,但对我的问题没有帮助。

在阅读https://github.com/bokeh/bokeh/issues/4507 之后,我尝试将DataTable 包装在不同的模块中,如Panel、WidgetBox 等,但没有成功。为简单起见,我使用未链接到我的数据的示例数据在单独的 Django 视图中生成表,并创建了单独的模板。

我现在已经没有想法了。我知道 Bokeh 中的小部件存在渲染问题,所以我猜我的问题可能与这些问题有关,但更有可能是我缺乏知识。代码如下。

DJANGO 视图

def datatable_test(request):

data = dict(
    dates=[date(2014, 3, i + 1) for i in range(10)],
    downloads=[randint(0, 100) for i in range(10)],
)
source = ColumnDataSource(data)

columns = [
    TableColumn(field="dates", title="Date", formatter=DateFormatter()),
    TableColumn(field="downloads", title="Downloads"),
]

data_table_mth = DataTable(source=source, columns=columns, width=400, height=280)

layout = column(
    Spacer(width=100),
    WidgetBox(data_table_mth),
    )

script_table, div_table = components(layout)
output_file("DATATABLE TEST.html")
show(layout)

return render(request, 'integrated/datatable_test.html', 'script_table': script_table,'div_table': div_table)

DJANGO 模板

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>% block title %% endblock %</title>

  <link href="https://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.4.0.min.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.bokeh.org/bokeh/release/bokeh-tables-1.4.0.min.css" rel="stylesheet" type="text/css">


  <script src="https://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.js"></script>
  <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.4.0.min.js"></script>
  <script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-1.4.0.min.js"></script>

   script_table | safe 

</head>

<body>
    <section class="content">
    <div class="row">
        <div class="col-md-12">
          <div class="box box-success">
            <div class="box-body">
                 div_table | safe 
            </div>
          </div>
        </div>
      </div>
    </section>
</body>

作为嵌入表的输出为空白: output as embedded table

输出为独立的 html 作品: output as standalone

【问题讨论】:

浏览器的javascript控制台有报错吗? 嗯,这很尴尬,它现在在一个单独的模板和一个单独的视图上工作,但不是作为原始视图/模板的一部分。让我再挖一点。 【参考方案1】:

按照 bigreddot 的建议,我打开了浏览器控制台,当 DataTable 嵌入其原始视图/模板时显示以下错误消息:

browser console

【讨论】:

如果您设置了reorderable=True,您将需要自己手动加载该 jq 库。这在某处有记录,但可能不够突出。也许您的其他模板会加载它,而新模板则不会。或者在另一种情况下您可能没有启用reorderable 我发现错误:我没有正确加载 jQuery 脚本链接。使用 Ajax 链接

以上是关于嵌入式散景数据表未在 Django 中显示的主要内容,如果未能解决你的问题,请参考以下文章

嵌入式 pdf 文件未在 Django 中显示

尝试在 Django 上传按钮旁边嵌入散景图时出现 ImportError

在 django 中使用交互式控件制作散景图

在bokeh中嵌入散景应用程序

无法将散景图嵌入到 Flask 应用程序中

在Flask中嵌入散景图