具有条件颜色的单元格的bokeh数据表 [英] bokeh DataTable with conditionally coloured cells

问题描述

我想在bokeh中显示一个数据表，根据单元格的文本内容，单元格是红色还是橙色.

I want to display a DataTable in bokeh, wich cells are either red or orange, according to the text content of the cell.

例如，如果单元格包含单词"error"，则该单元格将以红色背景显示. 如果单元格中包含警告"一词，则为橙色.

For example, if the cell contains the word "error", then the cell is displayed in red background. If the cells contains the word "warning", then it's orange.

我相信我应该使用[HTMLTemplateFormatter][1]，但是如何使用?

I believe I should use [HTMLTemplateFormatter][1], but how?

我该怎么做?

谢谢

推荐答案

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

Looking through the documentation, you can use a HTMLTemplateFormatter and underscore js to format the table. See http://docs.bokeh.org/en/latest/docs/reference/models/widgets.tables.html and http://underscorejs.org/#template for more info. I attached an example to format based on integer values, although you could extend it as you want.

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

Note: this essentially imbeds a div within each table cell, so there is still a small white border around each. If possible you could resize the inner divs, or style the parent elements.

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

Update: depending on the bokeh version you are using you may need to include lodash or underscore js in your html document i.e. : <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中定义颜色，则一种更简单的方法是将颜色定义为列数据源中的一个字段，并在模板代码中引用该值.

If you are happy to define the colors within python, a simpler method is to define the colors as a field in the column data source and reference the value in the template code.

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的回调)，则该方法将不会在基础值发生变化时更新填充颜色.

If you are relying completely on javascript (i.e. no python based callbacks), this approach wont update the fill colors if the underlying values change.

这篇关于具有条件颜色的单元格的bokeh数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！