为什么散景 DataTable 中使用自定义 HTMLTemplateFormatter 设置样式的文本无法正确显示？

Question

我想在散景数据表中有一个彩色矩形。因此我找到了这些 .

在这四个示例中，我想以稍微修改的方式使用数字 4。这是我更改代码的方式：

from bokeh.io import output_notebook, show
output_notebook()
from bokeh.palettes import Spectral

from random import randint
from bokeh.io import output_file, show
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn, HTMLTemplateFormatter

output_file("data_table.html")

data = dict(
    cola=[randint(0, 100) for i in range(10)],
    colb=[randint(0, 100) for i in range(10)],
    colc=['&#9608' for i in range(10)],
#     color=['#00FF00' for i in range(10)]
    color = Spectral[10]
)

source = ColumnDataSource(data)

template="""                
            <p style="color:<%= 
                (function colorfromint(){
                    return(color)
                    }()) %>;"> 
                <%= value %>
            </p>
            """

formatter =  HTMLTemplateFormatter(template=template)

columns = [TableColumn(field="cola", title="CL1", width = 100),
           TableColumn(field='colb', title='CL2', width = 100),
           TableColumn(field='colc', title='CL3', formatter=formatter, width=500),
           TableColumn(field='color', title='CL4')
          ]
data_table = DataTable(source=source,
                       columns=columns,
                       fit_columns=True,
                       selectable = True,
                       sortable = True,
                       width=400,height=400)

show(data_table)

现在的问题是我在自定义样式字段中写入的矩形（或任何其他文本）未正确显示。它在 table 字段中偏移到最下方并且被截断了一半。

另一方面，当我在 jupyter notebook 中显示相同的 table 时，它显示正确，如下所示：

我需要如何更改模板以在 jupyter notebook 外正确格式化和显示 bokeh DataTable 字段中的文本？或者换句话说，为什么使用自定义 HTMLTemplateFormatter 设置样式的 bokeh DataTable 中的文本在 jupyter notebook 之外没有正确显示？

Answer 1

要了解为什么它看起来像现在这样，使用浏览器的 DevTools 非常有帮助。在这种情况下，您使用 <p> 默认情况下（至少在 Google Chrome 中）作为一些边距。只需将 p 标签与 span 标签放在一起。

为什么散景 DataTable 中使用自定义 HTMLTemplateFormatter 设置样式的文本无法正确显示？

Why is the text in the bokeh DataTable that is styled with a custom HTMLTemplateFormatter not displayed corretly?

python

bokeh