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

绘图上的工具提示太大，会溢出绘图，因为它们显示的字符串太长。我一直在浏览源代码（还有一点javascript），但没有找到任何地方可以让我在不旋转自己的HTML或javascript的情况下设置字体（即通过一些Python对象）。我还尝试过天真地将

和

\n

字符添加到工具提示字符串中，但没有成功

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

更新：我已尝试将字体设置为小字体，但仍然无法在工具提示中获取换行符。以下是我的工具提示代码：

hover.tooltips=”“”
y:$y

日期：@日期

项目：
@items
“”“

问题是，

items

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

您可以使用a，它可以让您做您需要的事情

目前，您可能有以下情况：

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

尝试：

hover.tooltips=”“”
我的数据的索引是：$index

我的foo属性为粗体@foo
我可以使用自定义字体@bar
"""

您可以在上面的文档链接和bokeh回购协议中的两个示例中看到示例：

---

在做了大量的挖掘之后，对于当前版本的Bokeh来说，如果不进行一些源代码编辑，似乎是不可能的

通过改变

bokeh.js

解析字符串的方式，我能够实现换行符的效果

在我的ColumnDataSource中，使用关键字参数

items=[['point0item0
'，'point0item1
']，['point1item1
'，…]，…]

我更改了集合工具提示的解析（不适用于原始字符串工具提示） 在

bokeh.js

中，通过将代码从

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

悬停在同一数据点上的屏幕截图如下所示

---

我知道这个问题已经很老了，但这两个答案都没有帮助我解决这个问题，即在单个变量的渲染工具提示字符串中添加换行符

TL；博士 使用

{safe}

防止HTML转义，并手动更改工具提示字符串以添加HTML

换行符

---

@birdsarah帮助在不同变量的工具提示字符串之间添加了换行符@eqzx涉及编辑bokeh源代码，这对我来说不是一个选项。对于列表中的数据，两个答案都没有启用换行符

在谷歌上搜索，我发现它指向

{safe}

修饰符，但我没有注意到它

你基本上要做两件事：

在

项目

列中手动添加HTML换行符，以分隔列表中的每个项目

将

{safe}

修饰符添加到项目的工具提示中，以便不会转义HTML字符

假设您的数据位于

pd.DataFrame

中，并且

items

列包含数据框中每个单元格的列表

data.items=data.items.transform（lambda x:“
”.join（x））
...
hover.tooltips=“”
y:$y

日期：@日期

项目：
@items{safe}
"""

---

这将拆分

@items

列中的每个项目，并在工具提示字符串中以单独的行呈现它们。

谢谢，+1，我看到了这些示例，但我希望避免编写自己的HTML（我意识到我在问题中说了JS——我的错）。没有保存一些默认字体属性并可以修改的Python对象吗？没有，恐怕您需要编写自己的HTML。如果

bar

是多个项目的列表，有没有办法将工具提示设置为每个项目都有换行符？

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));

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