python - 具有 Bokeh DataTable CSS 样式的 HTMLTemplateFormatter 自定义模板

Question

我正在尝试使用 DataTable 设置一个小型 Bokeh 应用程序，该应用程序可能包含长文本，具体取决于列。我希望有一个很好的工具提示工具，可以在将鼠标移到相应单元格上方时显示完整的截断文本。

我完成了一个可能完美完成工作的前一个问题，但我无法得到正确的结果。这是上一个问题:How to add HoverTool to a Data Table (Bokeh, Python)

我正在研究的解决方案是 Ferrard 提供的具有漂亮 CSS 样式的解决方案。

不幸的是，我对 CSS 和 html 几乎一无所知。

这是我要重现的代码。

主.py

main.py:

from os.path import dirname, join
import pandas as pd
from bokeh.io import curdoc, show
from bokeh.models import ColumnDataSource, Div
from bokeh.models.widgets import DataTable, TableColumn, HTMLTemplateFormatter
from bokeh.layouts import layout

template = """<div class="tooltip-parent"><div class="tooltipped"><%= value %></div><div class="tooltip-text"><%= value %></div></div>"""

df = pd.DataFrame([
    ['this is a longer text that needs a tooltip, because otherwise we do not see the whole text', 'this is a short text'],
    ['this is another loooooooooooooooong text that needs a tooltip', 'not much here'],
], columns=['a', 'b'])

columns = [TableColumn(field=c, title=c, width=20, formatter=HTMLTemplateFormatter(template=template)) for c in ['a', 'b']]

table = DataTable(source=ColumnDataSource(df), columns=columns)

l = layout([[table]])

curdoc().add_root(l)

show(l)

desc.html

<style>
.tooltip-parent {
    width: 100%;
}

.tooltipped {
    overflow: hidden;
    width: 100%;
}

.tooltip-text {
    visibility: hidden;
    width: 250px;
    background-color: rgba(0, 0, 0, 1);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 5px;
    position: relative;
    z-index: 1;
    top: 100%;
    left: 0%;
    white-space: initial;
    text-align: left;
}

.tooltipped:hover + .tooltip-text {
    visibility: visible;
}

div.bk-slick-cell {
    overflow: visible !important;
    z-index: auto !important;
}
</style>

<h1>Tooltip demo</h1>

这很愚蠢，但我真的不知道我应该将 desc.html 文件放在我的工作目录中的什么位置，以便 bokeh 服务器可以调用它...我通读了 bokeh 文档并注意 Directory format for bokeh 但是没有设法使用静态或模板目录来获得正确的结果。

这是我想要的最终结果 /image/SB815.png (没有足够的声誉来链接图像)

我这边只有没有“工具提示演示”标题且没有任何工具提示工作的 DataTable。

这是我关于堆栈的第一个问题，希望一切都好:)

Answer 1

在目录风格的应用程序中，您可以创建具有以下结构的templates/index.html 模板:

{% extends base %}

{% block title %}My Bokeh App{% endblock %}

{% block preamble %}
<style>
    /* your styles here */
</style>
{% endblock %}

该应用程序将使用此 index.html 自动呈现自身，其中包含您的样式表。一般来说，最好有更简单的方法来向 Bokeh 应用程序添加额外的样式表规范。我鼓励你打开一个 GitHub issue开始讨论。