Question

我对Bokeh / Python和HTML都比较陌生。我创建了一个基于服务的散景图，我想在网页上显示。我一直按照https://bokeh.pydata.org/en/latest/docs/user_guide/embed.html的说明进行操作。特别是，我使用autoload_server生成脚本。但是，当我将脚本标记放在HTML文档的头部时（显然是正确的，根据上面链接的最后一行）：

<!DOCTYPE html>
<head>
<script
src="http://localhost:5006/autoload.js?bokeh-autoload-element=6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100&bokeh-absolute-url=http://localhost:5006&bokeh-session-id=bTinOCNtjuDagomoQgcw1EKJ7dUMkzSQJIRKozmGiqTc"
id="6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100"
data-bokeh-model-id="676400d3-9929-4d9e-aefe-2fb440f526d6"
data-bokeh-doc-id=""
></script>
</head>

<body>
</body>
</html>

网页上显示以下错误消息：

散景错误渲染Bokeh模型时出错：id为'6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100'的元素必须在正文下

然后我从头部删除脚本并将其放在正文中。但这导致一个完全空白的网页;该情节根本没有渲染。

非常感谢任何帮助！

Answer 1

如果我们检查一个基本示例生成的html：

from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import file_html

plot = figure()
plot.circle([1,2], [3,4])

html = file_html(plot, CDN, "plot")
print(html)

遵循以下格式：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.9.min.css" type="text/css" />
    <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.9.min.js"></script>
  </head>
  <body>

    <!-- generated div -->
    <div class="bk-root">
        <div class="bk-plotdiv" id="7a7b6ca9-3dec-430d-98f2-a0a7067c9ae0"></div>
    </div>

    <!-- generated script  -->
    <script type="text/javascript">
      (function() {..})
    </script>

  </body>
</html>

自动加载脚本替代生成的<div>和<script>，并可选择替换静态css和js引用。

<!DOCTYPE html>
<html>
  <head>
    <!-- optional -->
    <link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.9.min.css" type="text/css" />
    <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.9.min.js"></script>
  </head>
  <body>

    <!-- autoloading script -->
    <script
        src="https://demo.bokehplots.com/apps/slider/autoload.js?bokeh-autoload-element=aee6d395-d079-4e02-ae72-8e70e617990d&bokeh-app-path=/apps/slider&bokeh-absolute-url=https://demo.bokehplots.com/apps/slider"
        id="aee6d395-d079-4e02-ae72-8e70e617990d"
        data-bokeh-model-id=""
        data-bokeh-doc-id=""
    ></script>

  </body>
</html>

在html中嵌入基于服务器的散景图

1 个答案: