中心嵌入式散景图 [英] Center embedded Bokeh plot
问题描述
如何对嵌入式散景图进行居中?我的CSS似乎对Bokeh的< div class ="plotdiv"> 没有影响.在下面的最小示例中，我希望绘图位于黄色容器的中心.
How can I center an embedded Bokeh plot? My css seems to have no effect on Bokeh's <div class="plotdiv">. In the minimal example below, I want the plot to be at the center of the yellow container.
from jinja2 import Template
from bokeh.embed import components
from bokeh.models import Range1d
from bokeh.plotting import figure
from bokeh.resources import INLINE
from bokeh.util.browser import view
x1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
y1 = [0, 8, 2, 4, 6, 9, 5, 6, 25, 28, 4, 7]
p1 = figure(plot_width=300, plot_height=300)
p1.scatter(x1, y1, size=12, color="red", alpha=0.5)
script, div = components(p1)
template = Template('''<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bokeh Scatter Plots</title>
{{ js_resources }}
{{ css_resources }}
{{ script }}
<style>
.wrapper {
width: 800px;
background-color: yellow;
margin: 0 auto;
}
.plotdiv {
margin: 0 auto;
}
</style>
</head>
<body>
<div class='wrapper'>
{{ div }}
</div>
</body>
</html>
''')
js_resources = INLINE.render_js()
css_resources = INLINE.render_css()
filename = 'embed_multiple.html'
html = template.render(js_resources=js_resources,
css_resources=css_resources,
script=script,
div=div)
with open(filename, 'w') as f:
f.write(html)
view(filename)
**下面的填充符仅用于安抚SE的机器人**
** The filler below is added only to appease SE's robot **
SE的机器人要我添加更多详细信息"，因为这个问题是主要是代码".嘿，机器人，这个问题很简单，而且仅仅是大部分是代码"，因为我做了作业，并试图使人们更容易地帮助我.
SE's robot wants me to add "more details" because this question is "mostly code." Hey, robot, the question is straightforward, and it's only "mostly code" because I did my homework and try to make it easier for people to help me.
推荐答案
将Bokeh 0.11.1 更改为对我有用的以下作品:
With Bokeh 0.11.1 changing to the following works for me:
.bk-plot-wrapper table {
margin: 0 auto;
}
问题是 div.bk-plot-wrapper 占用了封闭的< div> 的所有空间.但是内部布局的< table> 却没有.我不是CSS专家，但也许其他人可以添加更多信息
The issue is the the div.bk-plot-wrapper takes up all the space of the enclosing <div>. But the internal <table> that lays out the plot doesn't. I'm not a CSS expert, but maybe someone else can add more information
两个注意事项:我不确定您使用的是哪个版本的Bokeh， .plotdiv 已有一段时间没有使用.另外请注意，对布局的一些根本改进将在 0.12 中实现，以使Bokeh更具响应性，并且默认情况下为"webby"，因此上述代码可能不适用于 0.12 (尤其是< table> 消失了).
Two notes: I'm not sure what version of Bokeh you have, .plotdiv has not been in use for some time. Also please note that some foundational improvements to layout will be landing in 0.12 to make Bokeh much more respponsive and "webby" by default, and so the above code will probably not work with 0.12 (in particular, the <table> is going away).
这篇关于中心嵌入式散景图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
