Python Bokeh - 使示例独立 - 小部件错误

Question

我正在学习 Bokeh，我想让示例 'stocks' 脚本 https://demo.bokeh.org/stocks 生成一个独立的 html 文件...我添加了以下代码：

from bokeh.embed import components

plots = [corr, ts1, ts2]
script, div = components(plots)
print(script)
print(div)


html = """<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bokeh Scatter Plots</title>

        <link rel="stylesheet"  href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.6.min.css"   type="text/css" />
        <script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.6.min.js"></script>

        <!-- COPY/PASTE SCRIPT HERE -->
        {}

    </head>
    <body>
        <!-- INSERT DIVS HERE -->
        {}
    </body>
</html>""".format(script, div)

with open("plotstock.html", "w") as f:
    f.write(html)

在脚本的底部，这适用于在 http://docs.bokeh.org/en/latest/docs/user_guide/embed.html 找到的一个更简单的示例（没有小部件导入）但是对于股票脚本我得到错误：

Bokeh Error

Model `PreText' does not exist. This could be due to a widget or a custom model not being registered before first usage.**

如果我删除对这个小部件的引用，我会在下一个小部件 Select 小部件...

中得到相同的错误

我可以运行这个脚本在数据本地化的散景服务器中正常，但嵌入是问题...

生成的 html 看起来确实完整，包含数据和组件部分：

    <head>
        <meta charset="utf-8">
        <title>Bokeh Scatter Plots</title>

        <link rel="stylesheet"   href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.6.min.css"   type="text/css" />
        <script type="text/javascript"    src="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.6.min.js"></script>

        <!-- COPY/PASTE SCRIPT HERE -->
    
<script type="text/javascript">
    (function() {
  var fn = function() {
    Bokeh.safely(function() {
      var docs_json = {"15b39cbd-8b49-4761-9152-f666c6fb1d9a":{"roots": {"references":[{"attributes":{"data_source":{"id":"f6f697cf-6d00-4218-94c1- 18c7e97d7e16","type":"ColumnDataSource"},"glyph":{"id":"3764347f-7617-42a8-a1d4- 0a6b255fc47d","type":"Line"},"hover_glyph":null,"muted_glyph":null,"nonselection_    glyph":{"id":"461527a6-e0fe-4159-89a8- c748b3f16335","type":"Line"},"selection_glyph":null},"id":"a6991b17-5e11-4864- 92ed-85b29f7fe737","type":"GlyphRenderer"},{"attributes":{"months": [0,4,8]},"id":"a3ac5382-f490-408f-b608-f3cdca26772b","type":"MonthsTicker"},    {"attr   ....  ["87c565c2-e8d1-41ea-958d-ea09daa88b3a"]},"title":"Stocks","version":"0.12.6"}};
      var render_items = [{"docid":"15b39cbd-8b49-4761-9152-f666c6fb1d9a","elementid":"ac68790a-4571-49cb-8d1c-08c6f3a9d711","modelid":"a5ab1659-6d31-4869-8d5d-184d27fd5732"},   {"docid":"15b39cbd-8b49-4761-9152-f666c6fb1d9a","elementid":"202aa28c-793d-46df-99ed-30cc4d62b827","modelid":"c22f84ba-56d9-49ab-9d81-314546cfec5c"},  {"docid":"15b39cbd-8b49-4761-9152-f666c6fb1d9a","elementid":"725a58d5-6c34-4f56-8d82-64ebef5c4e46","modelid":"e1fc4190-8882-4d48-be12-b46f9817d525"}];
  
      Bokeh.embed.embed_items(docs_json, render_items);
    });
  };
  if (document.readyState != "loading") fn();
  else document.addEventListener("DOMContentLoaded", fn);
})();

</script>

    </head>
    <body>
        <!-- INSERT DIVS HERE -->
        ('\n<div class="bk-root">\n    <div class="bk-plotdiv" id="ac68790a-4571-49cb-8d1c-08c6f3a9d711"></div>\n</div>', '\n<div class="bk-root">\n    <div class="bk-plotdiv" id="202aa28c-793d-46df-99ed-30cc4d62b827"></div>\n</div>', '\n<div class="bk-root">\n    <div class="bk-plotdiv" id="725a58d5-6c34-4f56-8d82-64ebef5c4e46"></div>\n</div>')
    </body>
</html>

谁能告诉我发生了什么或有什么想法吗？

谢谢。

Answer 1

Bokeh 小部件的 JS 文件是单独分发的，因此页面只有在实际使用它们时才会产生加载它们的成本。您需要按照 in the documentation:

中的描述从 CDN 中包含 bokeh-widgets

<link
    href="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.6.min.css"
    rel="stylesheet" type="text/css">    
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.6.min.js"></script>

Python Bokeh - 使示例独立 - 小部件错误

Python Bokeh - Making example standalone - Widget error

python

bokeh