我在我的Django项目中嵌入了一个Bokeh图表，但我对它所创建的嵌入有问题。我将模板中的脚本和div导入为{{ div | safe }}和{{ script | safe }}，但div在我的模板上创建了一个大的空格。
有什么想法吗？
Here's an image of how it looks in the browser
And here's the div which is really long for some reason
脚本：
<script type="text/javascript">
(function() {
var fn = function() {
Bokeh.safely(function() {
(function(root) {
function embed_document(root) {
var docs_json = {"998040af-6ec7-4d0a-9512-892e668e543b":{"roots":{"references":[{"attributes":{},"id":"39af7b08-c2a0-4239-8140-5fb6715147c3","type":"ResetTool"},{"attributes":{},"id":"66fe871a-6ed6-485c-8785-2348adf6114e","type":"SaveTool"},{"attributes":{"active_drag":"auto","active_inspect":"auto","active_scroll":"auto","active_tap":"auto","tools":[{"id":"5974d4bb-2135-4a2a-ae1d-33193cf46b77","type":"PanTool"},{"id":"4d082f4c-d578-4258-ada6-3f36133784c8","type":"WheelZoomTool"},{"id":"9faa6e3c-28e7-497a-a09a-d8ca67e6dffd","type":"BoxZoomTool"},{"id":"66fe871a-6ed6-485c-8785-2348adf6114e","type":"SaveTool"},{"id":"39af7b08-c2a0-4239-8140-5fb6715147c3","type":"ResetTool"},{"id":"07186e88-4a07-43f0-8246-0e4dd3ac404e","type":"HelpTool"}]},"id":"66619cf2-604a-43ed-b139-0b376222a87e","type":"Toolbar"},{"attributes":{"callback":null},"id":"451449e3-c761-4c57-a674-8b1b5a37f378","type":"DataRange1d"},{"attributes":{"callback":null},"id":"e0c60293-c503-4885-af6b-132872d94c5c","type":"DataRange1d"},{"attributes":{"below":[{"id":"c419969e-5741-4736-90de-34259d29a726","type":"LinearAxis"}],"border_fill_color":{"value":"whitesmoke"},"left":[{"id":"5e62dbcd-09f9-410b-9b19-c8f420b90bfb","type":"LinearAxis"}],"plot_height":150,"plot_width":400,"renderers":[{"id":"c419969e-5741-4736-90de-34259d29a726","type":"LinearAxis"},{"id":"42ac392d-f455-4528-95e3-f940470c065b","type":"Grid"},{"id":"5e62dbcd-09f9-410b-9b19-c8f420b90bfb","type":"LinearAxis"},{"id":"120afe85-61ea-4894-8366-9d5b0887adde","type":"Grid"},{"id":"5ba3c58f-6a2a-4af8-bb1a-bb6add5cc76d","type":"BoxAnnotation"},{"id":"d5d3beda-b199-4e31-a82a-4ca59930767d","type":"GlyphRenderer"}],"sizing_mode":"scale_width","title":{"id":"01d880cf-b868-49b4-b91b-bec60d5de6d2","type":"Title"},"toolbar":{"id":"66619cf2-604a-43ed-b139-0b376222a87e","type":"Toolbar"},"x_range":{"id":"e0c60293-c503-4885-af6b-132872d94c5c","type":"DataRange1d"},"x_scale":{"id":"8a36f571-dd09-4aed-980c-e19037c9b24a","type":"LinearScale"},"y_range":{"id":"451449e3-c761-4c57-a674-8b1b5a37f378","type":"DataRange1d"},"y_scale":{"id":"9da9e3b4-e359-4786-bd7c-daf86e94c3bf","type":"LinearScale"}},"id":"77eaaafa-b380-4c45-832a-65faea06bb98","subtype":"Figure","type":"Plot"},{"attributes":{},"id":"07186e88-4a07-43f0-8246-0e4dd3ac404e","type":"HelpTool"},{"attributes":{},"id":"d5ced699-d662-4c31-9b6a-793d97c998c8","type":"BasicTickFormatter"},{"attributes":{"formatter":{"id":"0da65dd3-5702-4c74-91e1-71733066a74f","type":"BasicTickFormatter"},"plot":{"id":"77eaaafa-b380-4c45-832a-65faea06bb98","subtype":"Figure","type":"Plot"},"ticker":{"id":"41d2e0a6-2feb-4437-bb35-efcea6c1c813","type":"BasicTicker"}},"id":"c419969e-5741-4736-90de-34259d29a726","type":"LinearAxis"},{"attributes":{"data_source":{"id":"2e6d3a2c-3d54-4b8a-984d-9d620aa7febe","type":"ColumnDataSource"},"glyph":{"id":"e0d6dab9-8df6-4abb-b825-b273548f408a","type":"MultiLine"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"75db6381-cd4f-4161-9926-ec219d3bd761","type":"MultiLine"},"selection_glyph":null,"view":{"id":"f8571075-8034-434f-9579-5197405959a9","type":"CDSView"}},"id":"d5d3beda-b199-4e31-a82a-4ca59930767d","type":"GlyphRenderer"},{"attributes":{"source":{"id":"2e6d3a2c-3d54-4b8a-984d-9d620aa7febe","type":"ColumnDataSource"}},"id":"f8571075-8034-434f-9579-5197405959a9","type":"CDSView"},{"attributes":{"plot":{"id":"77eaaafa-b380-4c45-832a-65faea06bb98","subtype":"Figure","type":"Plot"},"ticker":{"id":"41d2e0a6-2feb-4437-bb35-efcea6c1c813","type":"BasicTicker"}},"id":"42ac392d-f455-4528-95e3-f940470c065b","type":"Grid"},{"attributes":{},"id":"0da65dd3-5702-4c74-91e1-71733066a74f","type":"BasicTickFormatter"},{"attributes":{"line_alpha":{"value":0.1},"line_color":{"value":"#1f77b4"},"line_width":{"value":4},"xs":{"field":"xs"},"ys":{"field":"ys"}},"id":"75db6381-cd4f-4161-9926-ec219d3bd761","type":"MultiLine"},{"attributes":{"callback":null,"column_names":["xs","ys","line_color","line_alpha"],"data":{"line_alpha":[0.8,0.3],"line_color":["firebrick","navy"],"xs":[[1,3,2],[3,4,6,6]],"ys":[[2,1,4],[4,7,8,5]]}},"id":"2e6d3a2c-3d54-4b8a-984d-9d620aa7febe","type":"ColumnDataSource"},{"attributes":{"formatter":{"id":"d5ced699-d662-4c31-9b6a-793d97c998c8","type":"BasicTickFormatter"},"plot":{"id":"77eaaafa-b380-4c45-832a-65faea06bb98","subtype":"Figure","type":"Plot"},"ticker":{"id":"132532f4-248b-4037-9069-7d27a093e89a","type":"BasicTicker"}},"id":"5e62dbcd-09f9-410b-9b19-c8f420b90bfb","type":"LinearAxis"},{"attributes":{"bottom_units":"screen","fill_alpha":{"value":0.5},"fill_color":{"value":"lightgrey"},"left_units":"screen","level":"overlay","line_alpha":{"value":1.0},"line_color":{"value":"black"},"line_dash":[4,4],"line_width":{"value":2},"plot":null,"render_mode":"css","right_units":"screen","top_units":"screen"},"id":"5ba3c58f-6a2a-4af8-bb1a-bb6add5cc76d","type":"BoxAnnotation"},{"attributes":{"dimension":1,"plot":{"id":"77eaaafa-b380-4c45-832a-65faea06bb98","subtype":"Figure","type":"Plot"},"ticker":{"id":"132532f4-248b-4037-9069-7d27a093e89a","type":"BasicTicker"}},"id":"120afe85-61ea-4894-8366-9d5b0887adde","type":"Grid"},{"attributes":{"line_alpha":{"field":"line_alpha"},"line_color":{"field":"line_color"},"line_width":{"value":4},"xs":{"field":"xs"},"ys":{"field":"ys"}},"id":"e0d6dab9-8df6-4abb-b825-b273548f408a","type":"MultiLine"},{"attributes":{},"id":"8a36f571-dd09-4aed-980c-e19037c9b24a","type":"LinearScale"},{"attributes":{},"id":"41d2e0a6-2feb-4437-bb35-efcea6c1c813","type":"BasicTicker"},{"attributes":{"plot":null,"text":""},"id":"01d880cf-b868-49b4-b91b-bec60d5de6d2","type":"Title"},{"attributes":{},"id":"132532f4-248b-4037-9069-7d27a093e89a","type":"BasicTicker"},{"attributes":{},"id":"9da9e3b4-e359-4786-bd7c-daf86e94c3bf","type":"LinearScale"},{"attributes":{},"id":"5974d4bb-2135-4a2a-ae1d-33193cf46b77","type":"PanTool"},{"attributes":{},"id":"4d082f4c-d578-4258-ada6-3f36133784c8","type":"WheelZoomTool"},{"attributes":{"overlay":{"id":"5ba3c58f-6a2a-4af8-bb1a-bb6add5cc76d","type":"BoxAnnotation"}},"id":"9faa6e3c-28e7-497a-a09a-d8ca67e6dffd","type":"BoxZoomTool"}],"root_ids":["77eaaafa-b380-4c45-832a-65faea06bb98"]},"title":"Bokeh Application","version":"0.12.10"}};
var render_items = [{"docid":"998040af-6ec7-4d0a-9512-892e668e543b","elementid":"46dc4d68-63cf-4288-aa48-347675c82cc3","modelid":"77eaaafa-b380-4c45-832a-65faea06bb98"}];
root.Bokeh.embed.embed_items(docs_json, render_items);
}
if (root.Bokeh !== undefined) {
embed_document(root);
} else {
var attempts = 0;
var timer = setInterval(function(root) {
if (root.Bokeh !== undefined) {
embed_document(root);
clearInterval(timer);
}
attempts++;
if (attempts > 100) {
console.log("Bokeh: ERROR: Unable to embed document because BokehJS library is missing")
clearInterval(timer);
}
}, 10, root)
}
})(window);
});
};
if (document.readyState != "loading") fn();
else document.addEventListener("DOMContentLoaded", fn);
})();
</script>
股利：
<div class="bk-root">
<div class="bk-plotdiv" id="46dc4d68-63cf-4288-aa48-347675c82cc3"></div>
</div>
答案 0 :(得分：1)
您可以将--net $network_name（或.bk-root { height: auto; }）添加到CSS中以解决此问题。 Bokeh将其根元素的initial和width设置为100％，以允许height和scale_*大小调整模式填充最大可用空间。但是，宽高比保留模式可能会为您提供类似于此处观察到的结果。
答案 1 :(得分：0)
您已将地图sizing_mode设置为"scale_width"，这明确是Bokeh的方向，以尽可能多地占用水平空间。也许您需要默认的大小调整模式"fixed"。
答案 2 :(得分：0)
查看有关border
的文档 from bokeh.plotting import figure, output_file, show
output_file("border.html")
p = figure(plot_width=400, plot_height=400)
p.border_fill_color = "whitesmoke"
p.min_border_left = 80
p.circle([1,2,3,4,5], [2,5,8,2,7], size=10)
show(p)
答案 3 :(得分：0)
