将工具提示添加到Bokeh DataTable

Question

我有一个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中显示相应的值.所以,例如,如果你在'狗'上面盘旋,工具提示将是10,如果你在'bag'上空盘旋,工具提示将是50.

根据我的理解,还没有一种方法可以使用HoverTool添加工具提示,这可以在散点图等上完成.但是这个答案表明可以采用解决方法,尽管在该示例中工具提示仅显示了值显示在表格中.如何让工具提示显示相应的值？

Answer 1

该HTMLTemplateFormatter类是一个HTML格式使用传递给它作为一个模板字符串kwarg。它使用Undescorejs 中的模板方法和语法来呈现模板。该语法允许模板的 if-else 条件呈现，并允许通过直接在模板中传递列名来使用其他列的值。我们将使用此信息根据您的问题中指定的条件定义我们的模板，即，如果列是 A 和 B，则从相邻列获取工具提示标题。

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

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

• 从 csv 文件bokeh.csv加载数据帧：df2，
• 定义数据表的数据源：source,
• 定义了一个模板具有用于工具提示＆行值绘制为每列所需的条件：template，
• 定义列：ColumnswithHTMLTemplateFormatter用于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)