具有条件彩色单元格的散景 DataTable

Question

我想在散景中显示一个 DataTable，其中的单元格根据单元格的文本内容显示为红色或橙色。

例如，如果单元格包含单词“error”，则单元格显示为红色背景。如果单元格包含“警告”一词，则为橙色。

我认为我应该使用 [HTMLTemplateFormatter][1]，但是如何使用？

我该怎么做？

谢谢

Answer 1

查看文档，可以使用 HTMLTemplateFormatter 和下划线 js 来格式化 table。参见 http://docs.bokeh.org/en/latest/docs/reference/models/widgets.tables.html 和 http://underscorejs.org/#template 了解更多信息。我附上了一个基于整数值的格式示例，尽管您可以根据需要扩展它。

注意： 这基本上在每个 table 单元格中嵌入了一个 div，因此每个单元格周围仍然有一个小的白色边框。如果可能，您可以调整内部 div 的大小，或设置父元素的样式。

更新： 根据您使用的散景版本，您可能需要在 html 文档中包含 lodash 或下划线 js，即：<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>

from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, TableColumn, HTMLTemplateFormatter
from bokeh.io import show

dict1 = {'x':[0]*6,'y':[0,1,0,1,0,1]}
source = ColumnDataSource(data=dict1)

template="""
<div style="background:<%= 
    (function colorfromint(){
        if(value == 1){
            return("blue")}
        else{return("red")}
        }()) %>; 
    color: white"> 
<%= value %></div>
"""

formater =  HTMLTemplateFormatter(template=template)
columns = [
    TableColumn(field="x", title="x"),
    TableColumn(field="y", title="y",formatter=formater)
]

data_table = DataTable(source=source, columns=columns, width=800)

如果您乐于在python内定义颜色，更简单的方法是将颜色定义为列数据源中的一个字段，并在模板代码中引用该值。

dict1 = {'x':[0]*6, 
         'y':[0, 1, 0, 1, 0, 1],
         'color':['blue', 'red', 'blue', 'red', 'blue', 'red']}
source = ColumnDataSource(data=dict1)

template="""
<div style="background:<%=color%>"; color="white";>
<%= value %></div>
"""

formater =  HTMLTemplateFormatter(template=template)

如果您完全依赖 javascript（即没有基于 python 的回调），如果基础值发生变化，此方法不会更新填充颜色。

具有条件彩色单元格的散景 DataTable

bokeh DataTable with conditionally colored cells

python

styling

bokeh