python - Bokeh django plot 嵌入 : large amount of white space in generated div tag

Question

我的 Django 元素中嵌入了一个 Bokeh 图表，效果很好，但我在使用它创建的嵌入时遇到了问题。我将模板中的脚本和 div 作为 {{ div |安全 }} 和 {{ script |安全 }} 但 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>

Answer 1

你可以添加 .bk-root { height: auto; } (或 initial)到你的 CSS 来解决这个问题。 Bokeh 将其根元素的 width 和 height 设置为 100%，以允许 scale_* 和 stretch_* 大小调整模式以填充最大可用空间。但是，纵横比保留模式可能会为您提供类似于此处观察到的结果。