将工具提示添加到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添加工具提示，这可以在散点图等上完成。但this answer建议可以采用解决方法，尽管在该示例中工具提示仅显示已显示的值在表中。如何让工具提示显示相应的值？

Answer 1

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

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

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

• 从csv文件bokeh.csv：df2加载数据帧，
• 定义数据表的数据源：source，
• 定义一个模板，其中包含每列的工具提示和行值呈现所需的条件：template，
• 定义列：Columns与HTMLTemplateFormatter for TableColumn渲染与template，
• 渲染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)