python - 更改散景图中选项卡的样式
问题描述
我想知道是否有办法更改散景图上生成的选项卡的属性。诸如增加文本字体、更改选项卡宽度等更改。以下是用于生成带有两个选项卡的绘图的简单代码。
from bokeh.models.widgets import Panel, Tabs
from bokeh.io import output_file, show
from bokeh.plotting import figure
output_file("slider.html")
p1 = figure(plot_width=300, plot_height=300)
p1.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)
tab1 = Panel(child=p1, title="circle")
p2 = figure(plot_width=300, plot_height=300)
p2.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=3, color="navy", alpha=0.5)
tab2 = Panel(child=p2, title="line")
tabs = Tabs(tabs=[ tab1, tab2 ])
show(tabs)
解决方案
您可以覆盖默认的 Bokeh 选项卡样式,如下所示(适用于 Bokeh v1.1.0)。
请注意,Bokeh CSS 库的实现可能会在即将发布的版本中发生变化。
下面找到的 css 样式适用于 v1.1.0,但不向后兼容 v1.0.4
from bokeh.plotting import save, figure
from bokeh.models import Paragraph, Panel, Tabs, Column
template = """
{% block postamble %}
<style>
.bk-root .bk-tab {
background-color: cyan;
width: 200px;
color: red;
font-style: italic;
}
.bk-root .bk-tabs-header .bk-tab.bk-active{
background-color: yellow;
color: blue;
font-style: normal;
font-weight: bold;
}
.bk-root .bk-tabs-header .bk-tab:hover{
background-color: yellow
}
</style>
{% endblock %}
"""
p = Paragraph(text = "Another tab", width = 600)
plot = figure()
plot.line(x = [1, 2], y = [3, 4])
tabs = [Panel(title = 'Tab1', child = plot)]
tabs.append(Panel(title = 'Tab2', child = p))
save(Column(Tabs(tabs = tabs, width = 600)), template = template)
结果:
推荐阅读
- c# - 何时取消挂钩 Xamarin 自定义渲染器中的事件
- javascript - Ant Design Dropdown - 访问子菜单中的道具值 [ React ]
- android - 调用了 Admob onAdLoaded 但屏幕上没有显示任何内容
- node.js - 前端服务器(Node JS 和 Angular JS)与后端服务器(.NET API)之间的连接
- sql - 以锯齿模式选择最大值(局部最大值)
- haskell - 有没有办法在 Yesod 中使用 defaultLayout 和源(管道)
- deployment - Solidity 迁移合同试运行与真实
- jenkins - 在 Jenkinsfile shell 中转义 JSON 字符串
- java - Thread#run() 中的 Thread#wait() 和 JFrame#keyPressed() 中的 Thread#notify() - 我的实现线程安全吗?
- youtube - Youtube 播放列表 api 返回部分数据