Question

我有一个熊猫DataFrame：

related

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

我想为A和B列中的单元格添加一个工具提示，并在A2或B2中显示相应的值。因此，例如，如果您将鼠标悬停在“狗”上，则工具提示将为10；如果将鼠标悬停在“袋子”上，则工具提示将为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和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) {%> "><%= value %> <%} else if (value==B){%> "><%= value %> <%} else {%> <%= value %> <%}%>""" 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)字符串使用条件语句，其列名直接用于比较，工具提示标题和行值的呈现。

const getStepData = (id) => {
  return async dispatch => {
    try {
      dispatch(fetchStepBegin());

      const res = await DataService.fetchStepData(id);
      const sortedTask = sortedTaskData(res)

      const sortedStepData = sortStepData(res)
      const newData = createSortedDataForDragAndDrop(sortedTask, sortedStepData)
      dispatch(fetchRawStepDataSuccess(res.data))
      dispatch(fetchStepDataSuccess(newData))
    }
    catch (err) {
      dispatch(fetchStepError(err))
      throw (err)
    }
  }
}

将工具提示添加到Bokeh DataTable

1 个答案: