散景图覆盖其他内容

Question

如何使我的散景图显示在某些内容的右边？

我有一个模板，其中图像相对于其他内容正确放置。当我用div提供的bokeh.embed.components替换该图像时，它将覆盖结果html中的其他内容。

我想要用Bokeh图替换下面的占位符美国地图图像>

我得到的是散景图覆盖了左侧的内容

生成脚本

import bokeh.plotting as blt
import bokeh.embed
import bokeh.resources

import jinja2

loader = jinja2.FileSystemLoader('.')
jenv = jinja2.Environment(line_statement_prefix='#', loader=loader)
t = jenv.get_template('bokeh_jinja.html')


blt.output_file('problem.html')
p = blt.figure(title='Problem Demonstration',
        x_range=[0.0, 10.0], y_range=[0.0, 10.0])
p.circle(1.0, 1.0)

#blt.show(p)


(script, div) = bokeh.embed.components(p)
with open('tmp.html', 'w') as ouf:
#    #ouf.write(t.render(bokeh_script='', bokeh_div="Hello World"))
    h = t.render(bokeh_script=script, bokeh_div=div, handedness='Right')
    ouf.write(h)

模板文件

bokeh_jinja.html

<!DOCTYPE html>
<html lang="en">
<head>
<title> Layout Test 1 </title>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">


<style>
.summary-info {
    float: left;
    width: 30%;
}
</style>

<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-1.4.0.min.js"></script>
<script type="text/javascript">
    Bokeh.set_log_level("info");
</script>
{{bokeh_script}}
</head>



<body>
<div class="summary-info">
<div class="image-dec">
{% for image in images %}
<img src={{image}} alt="Image Not Found" height=256>
{% endfor %}
</div>

<div class="stats-block">
    <dl>
        <dt>Name:</dt><dd> {{name}}</dd>
        <dt>Position:</dt><dd> {{position}} </dd>
        <dt>Hand:</dt><dd> {{handedness}}</dd>
        <dt>Hometown:</dt><dd> {{hometown}}</dd>
        <dt>ML Teams:</dt><dd>{{teams|join(', ')}}</dd>
    </dl>
</div>
</div>
<div class="map">
{{bokeh_div}}
<!-- If I edit the resulting HTML and replace the bokeh generated div with
  this image, I get the kind of results I want
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_%28states_only%29.svg"
     alt="Map Not Found" height=512>
-->
</div>
</body>
</html>

如何使我的散景图显示在某些内容的右边？我有一个模板，其中图像相对于其他内容正确放置。当我将图像替换为div ...

Answer 1

缺少关键参数是在保存元素的容器中设置display: flex;。尽管这种样式可能不好，但我只是将其设置为display: flex;的参数，即section

散景图覆盖其他内容

问题描述投票：0回答：1

模板文件

1个回答

最新问题

散景图覆盖其他内容

问题描述 投票：0回答：1

模板文件

1个回答

最新问题

问题描述投票：0回答：1