Python 中的 Bokeh HoverTool 自定义字体和换行符

Question

我绘图上的工具提示太大并且溢出绘图，因为它们显示的字符串很长。我一直在浏览源代码（以及一些 javascript），但没有找到可以让我设置字体 而无需 旋转我自己的 [=32] 的任何地方=] 或 JavaScript （即通过一些 Python 对象）。我也尝试天真地将   和 \n 字符添加到工具提示字符串中，但这没有用。

如何轻松更改工具提示字体（或可能的其他相关属性）？

更新: 我试过将字体设置得小一些，但仍然无法在工具提示中获取换行符。这是我的工具提示代码：

hover.tooltips = """ y: $y date: @dates items: @items """

问题是，items 源中的每个项目都是一个可变长度列表，我希望通过工具提示中呈现的换行符分隔列表中的每个条目

Answer 1

您可以使用 custom tooltip，它应该可以满足您的需求。

目前，您可能有类似的东西：

hover.tooltips = [
    ("index", "$index"),
    ("foo", "@foo"),
    ("bar", "@bar"),
]

尝试：

hover.tooltips = """
    The index of my data is: $index <br>
    My foo property is bold <strong>@foo</strong>
    I could use a custom font <font face="Arial" size="3">@bar </font>
"""

您可以在上面的文档 link 中以及 bokeh 存储库中的几个示例中查看示例：

https://github.com/bokeh/bokeh/blob/master/examples/interactions/us_marriages_divorces/us_marriages_divorces_interactive.py#L64

https://github.com/bokeh/bokeh/blob/master/examples/glyphs/sprint.py#L90

Answer 2

经过大量挖掘后，如果不进行一些源代码编辑，当前版本的 Bokeh 似乎是不可能的。

我可以通过更改 bokeh.js 解析字符串的方式来实现换行效果

在我的 ColumnDataSource 中使用关键字参数 items = [['point0item0 ', 'point0item1 '],['point1item1 ', ...], ...]

我更改了集合工具提示的解析（不适用于原始字符串工具提示）在 bokeh.js 中，以便它通过更改

中的代码来尊重它呈现的字符串中的   项

value = Util.replace_placeholders(value, ds, i, vars);
td.append($('<span>').html(value));

至

value = Util.replace_placeholders(value, ds, i, vars);
value = value.replace(/,/g, "");
value = value.replace(/&lt;/g, "<");
value = value.replace(/&gt;/g, ">");
td.append($('<span>').html(value));

除了我的示例之外，我还没有测试过它，而且我几乎从不写 javascript，所以用户要小心。我还注意到 .html(value) 调用在 Bokeh 版本 (0.9.2) 和 (0.9.3) 之间从 .text(value) 发生了变化，因此值字符串中的任何 HTML 代码都将得到尊重，但是   已经被 Util.replace_placeholders()

编码了（在我看来，'broken' ;）

在Python中，工具提示设置如下所示：

hover.tooltips=[
        ("grade", "$y"),
        ("date", "@dates"),
        ("items", "@items"),
    ]

悬停在同一数据点上的屏幕截图现在看起来像这样

Answer 3

我知道这个问题很老，但没有一个答案能帮助我解决问题，即以某种方式将换行符添加到单个变量的呈现工具提示字符串中。

TL;DR

使用 {safe} 防止 HTML 转义并手动更改工具提示字符串以添加 HTML   换行符。

@birdsarah 的 helped to added newlines between the tooltip strings of different variables. @eqzx's 涉及编辑散景源代码，这对我来说不是一个选项。两个答案均未启用列表中数据的换行符。

谷歌搜索，我遇到了 this discourse thread that pointed to the {safe} modifier, which is documented 但我没有注意到它。

你基本上必须做两件事：

在 items 列中手动添加 HTML 换行符以分隔列表中的每个项目。
将 {safe} 修饰符添加到项目的工具提示中，以便 HTML 个字符不会被转义。

假设您的数据在 pd.DataFrame 中，并且 items 列包含数据框中每个单元格的列表。

data.items = data.items.transform(lambda x: "<br>".join(x))

...

hover.tooltips = """
        y: $y <br>
        date: @dates <br>
        items: <br><font face="Arial" size="1">@items{safe}</font>
        """

这将拆分 @items 列中的每个项目，并将它们呈现在工具提示字符串的单独行中。

Python 中的 Bokeh HoverTool 自定义字体和换行符

Bokeh HoverTool custom font and newlines from Python

javascript

python

plot

bokeh

TL;DR