有没有办法将图像放在使用分类数据的散景图中？

Question

我试图在散景中的现有分类图表中添加水印。我试图通过多种方法添加图像，但还没有能够让它工作。

我尝试使用类别（字符串）作为x位置值。这会导致WebDriverException：

{“errorMessage”：“undefined不是对象（评估'document.getElementsByClassName（'bk-root'）[0] .children [0] .getBoundingClientRect'）”，“request”：{“headers”：{“接受“：” 应用/ JSON”， “接受编码”： “同一性”， “内容长度”： “171”， “内容类型”： “应用/ JSON;字符集= UTF-8”， “主机”： “127.0.0.1:52857","User-Agent":"selenium/3.141.0(python windows）”}，“httpVersion”：“1.1”，“method”：“POST”，“post”：“{\ “script \”：\“\ nreturn document.getElementsByClassName（'bk-root'）[0] .children [0] .getBoundingClientRect（）\ n \”，\“args \”：[]，\“sessionId \” ：\“308a7240-6123-11e9-a877-6d9cf99e3c61 \”}“，”url“：”/ execute“，”urlParsed“：{”anchor“：”“，”query“：”“，”file“：”执行”， “目录”： “/”， “路径”： “/执行”， “相对的”： “/执行”， “端口”： “”， “宿主”： “”， “密码”： “”， “用户”： “”， “用户信息”： “”， “权威”： “”， “协议”： “”， “源”： “/执行”， “queryKey”：{}， “块”：[”执行 “]}”，urlOriginal “：”/会话/ 308a7240-6123-11e9-a877-6d9cf99e3c61 /执行“}}

我也尝试将类别作为列表中的位置（类别[5]）。这不会出错，但不会在图上放置图像。

# Add watermark
p.image_url(url=[r'static/images/image.png'], x='Mismatch', y=500, w=100, h=100,
                anchor = 'center',
                global_alpha = 0.2)

预期结果是图像将出现在我的分类图表中所需的位置。

实际结果是没有图像出现，或者出现webdriverexception。

谢谢您的帮助！

Answer 1

你可以使用Div解决这个问题。您可以在Div中放置任意HTML代码，并使用内联css样式表（Bokeh v1.1.0）将此Div放置在屏幕上的任何位置。

from bokeh.plotting import figure, show
from bokeh.models import CustomJS, Div, Row

p1 = figure(plot_width = 300, plot_height = 300, x_range = (0, 10), y_range = (0, 10), title = "Doggy as background")
p1.line([1, 2, 3, 5, 6, 7, 8, 9, 10], [4, 5, 6, 1, 2, 3, 7, 8, 9, 0], line_width = 5)
url = "https://cdn3.iconfinder.com/data/icons/line/36/dog_head-512.png"
d1 = Div(text = '<div style="position: absolute; left:-300px; top:10px"><img src=' + url + ' style="width:280px; height:280px; opacity: 0.3"></div>')

show(Row(p1, d1))

结果：