为Bokeh DataTable添加提示工具

Question

I have a pandas DataFrame:

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

我已将其转换为Bokeh DataTable，但仅包括I、A和B列。我想为A和B列中的单元格添加工具提示，并显示A2或B2中对应的值。例如，如果您悬停在“dog”上，则工具提示将为10，如果您悬停在“bag”上，则工具提示将为50。

据我所知，尚不能使用HoverTool添加工具提示，这可以在散点图等上完成。但是，此答案提供了一种解决方法，尽管在该示例中，工具提示仅显示表中已显示的值。如何使工具提示显示相应的值？

- OD1995

Answer 1

HTMLTemplateFormatter 类是一种 HTML 格式化程序，它使用传递给它的模板字符串作为 kwarg。它使用 Underscorejs 中的 模板方法和语法 来呈现模板。该语法允许对模板进行 if-else 条件渲染，并允许直接将列名传递到模板中以使用来自其他列的值。我们将使用这些信息基于您问题中指定的条件定义我们的模板，即如果列为 A 和 B，则从相邻列获取工具提示标题。

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

下面的代码受到您问题中链接答案的启发，执行以下步骤：

• 从 csv 文件 bokeh.csv 加载数据帧：df2，
• 为数据表定义数据源：source，
• 定义具有所需条件的模板，用于每个列的工具提示和行值呈现：template，
• 使用具有 template 的 HTMLTemplateFormatter 为 TableColumn 呈现定义列：Columns，
• 呈现 DataTable：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)

- amanb