中心嵌入式散景图

编程入门 行业动态 更新时间:2024-10-15 12:33:22
本文介绍了中心嵌入式散景图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

如何对嵌入式散景图进行居中?我的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).

更多推荐

中心嵌入式散景图

本文发布于:2023-11-30 03:04:32,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1648508.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:嵌入式   中心   散景图

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!