gpt4 book ai didi

javascript - 在 html 中嵌入基于服务器的 Bokeh 图

转载 作者:行者123 更新时间:2023-11-28 02:37:19 25 4
gpt4 key购买 nike

我对 Bokeh/Python 和 HTML 都比较陌生。我创建了一个基于服务的 Bokeh 图,我想在网页上显示它。我一直在按照 https://docs.bokeh.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 错误渲染 Bokeh 模型时出错:ID 为“6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100”的元素必须位于正文下方

然后我从头部移除脚本并将其放在正文中。但这会导致一个完全空白的网页;情节根本不呈现。

非常感谢任何帮助!

最佳答案

如果我们检查一个基本示例生成的 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.bokeh.org/bokeh/release/bokeh-0.12.9.min.css" type="text/css" />
<script type="text/javascript" src="https://cdn.bokeh.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.bokeh.org/bokeh/release/bokeh-0.12.9.min.css" type="text/css" />
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.9.min.js"></script>
</head>
<body>

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

</body>
</html>

关于javascript - 在 html 中嵌入基于服务器的 Bokeh 图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46308102/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com