将工具提示添加到 Bokeh DataTable

Question

我有一个 pandas 数据框：

I      A      A2      B      B2
1    'dog'    10    'cat'    20
2    'elf'    15    'egg'    45
3    'hat'    80    'bag'    50

然后我将其转换为 Bokeh 数据表，但仅包含列 I、A 和 B。

我想为 A 列和 B 列中的单元格添加工具提示，并在 A2 或 B2 中显示相应的值。因此，例如，如果您将鼠标悬停在 'dog' 上，工具提示将为 10，如果您将鼠标悬停在 'bag' 上，则工具提示将为 50。

据我所知，（目前）还没有一种方法可以使用 HoverTool 添加工具提示，这可以在散点图等上完成。但是表明有一种解决方法是可能的，尽管在那例如，工具提示仅显示 table 中已显示的值。我如何让工具提示显示相应的值？

Answer 1

HTMLTemplateFormatter class is an HTML formatter that uses a template string passed to it as a kwarg. It uses the template method and syntax in Undescorejs 渲染模板。该语法允许 if-else 有条件地呈现模板，并允许通过直接在模板中传递列名来使用其他列的值。我们将使用此信息根据您问题中指定的条件定义我们的模板，即，如果列是 A 和 B，则从相邻列获取工具提示标题。

注意：我的数据框中的值没有引号 (' ')。例如，我有 dog 而不是 'dog'。没有它们，DataTable 看起来更整洁 :).

以下代码的灵感来自您问题中的链接答案，并执行以下步骤：

从 csv 文件加载数据帧 bokeh.csv: df2,
为数据定义数据源table:source,
定义一个模板，其中包含每列的工具提示和行值呈现所需的条件：template、
定义列：Columns 和 HTMLTemplateFormatter 用于 TableColumn 呈现 template，
呈现数据表：data_table,
显示 data_table.

代码:

请注意 template 字符串使用条件语句，列名直接用于比较、工具提示标题和行值的呈现。

import pandas as pd
from bokeh.models.widgets import DataTable, TableColumn, HTMLTemplateFormatter
from bokeh.models import ColumnDataSource
from bokeh.io import show

df2 = pd.read_csv('bokeh.csv')
source = ColumnDataSource(df2)    
template = """<% if (value==A) {%>
     <span href="#" data-toggle="tooltip" title="<%= A2 %>"><%= value %></span>
<%}
else if (value==B){%>
    <span href="#" data-toggle="tooltip" title="<%= B2 %>"><%= value %></span>
<%} 
else {%>
    <span href="#"><%= value %></span>
<%}%>"""

Columns = [TableColumn(field=Ci, title=Ci, width=20, formatter=HTMLTemplateFormatter(template=template)) for Ci in df2.columns]
data_table = DataTable(source=source, columns=Columns, width=400, height=280)

show(data_table)

将工具提示添加到 Bokeh DataTable

Add tooltip to Bokeh DataTable

python

tooltip

bokeh