具有半透明背景的 Python Bokeh Hovertool

Posted 2023-05-08

【中文标题】具有半透明背景的 Python Bokeh Hovertool

【英文标题】：Python Bokeh Hovertool with semi-transparent background

【发布时间】：2020-01-12 02:39:12

【问题描述】：

我希望使用Bokeh 生成散点图， 带有透明/半透明图像作为HoverTool 的一部分。

但是，在我当前的实现中，html 工具提示， 和里面的图片，如下图是不透明的。

问题是图像覆盖了数据点 在它后面。我希望避免减小图像大小， 因为它会更难看到。

因此，我想知道是否可以制作 html 工具提示半透明（或透明）， 通过修改以下代码：

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt

from bokeh.io import output_file
from bokeh.models import ColumnDataSource, HoverTool
from bokeh.plotting import figure, show

def polar_plot(x, y, i, outfile):
    ax = plt.subplot(111, projection='polar')
    ax.plot(x, y)
    ax.plot([x[i]], [y[i]], 'bo')
    ax.set_rticks([-1, -.5, 0, .5, 1, 1.5])
    ax.grid(True)
    plt.savefig(outfile, transparent=True, bbox_inches='tight')
    plt.close()

x = np.linspace(0, 2, 21)
y = np.sin(x * np.pi)
df = pd.DataFrame(
    'x': x,
    'y': y
)
df['filename'] = 'img' + df.index.astype(str) + '.svg'
df_cds = ColumnDataSource(df)

theta = x * np.pi
for row in df.iterrows():
    data = row[1]
    polar_plot(theta, y, row[0], data['filename'])

TOOLTIPS = f"""
<div style="background-color: rgba(0, 0, 0, 0.05);">
    <table style="background-color: rgba(0, 0, 0, 0.05);">
      <tr>
        <td>
            <img src="@filename"
                  
                style="float: left; margin: 0px 15px 15px 0px; background: transparent";
                border="1">
            </img>
        </td>
        <td>
        <span style="font-size: 12px; font-weight: bold;">x</span> = @x<br>
        <span style="font-size: 12px; font-weight: bold;">y</span> = @y<br>
        </td>
    </table>
</div>
"""

output_file('plot.html')

fig = figure()
fig.circle(x='x', y='y', source=df_cds)
hover = HoverTool(tooltips=TOOLTIPS)
fig.add_tools(hover)
show(fig)

【问题讨论】：

可能，原则上。您是否尝试过为不透明度应用各种 CSS 规则，但都不起作用？

设置“不透明度：0.2;” 标签内使悬停工具更加透明，但显然它不允许悬停工具后面的文本/图像变得可见。

你也target the img elements directly了吗？

【参考方案1】：

可能为时已晚... 在这里，我的解决方案将回调添加到您的工具提示中。

callback = CustomJS(code="""  
document.getElementsByClassName('bk-tooltip'[0].style.backgroundColor="transparent";
""")

然后

HoverTool(tooltips=TOOLTIPS,callback=callback)