【问题标题】:bokeh DataTable with conditionally colored cells具有条件彩色单元格的散景数据表
【发布时间】:2017-08-02 02:27:21
【问题描述】:

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

例如,如果单元格包含“错误”一词,则单元格将显示为红色背景。 如果单元格中包含“警告”一词,则为橙色。

我认为我应该使用[HTMLTemplateFormatter][1],但是如何使用?

我该怎么做?

谢谢

【问题讨论】:

    标签: python styling bokeh


    【解决方案1】:

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

    注意:这实质上是在每个表格单元格中嵌入了一个 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 的回调),如果基础值发生变化,这种方法不会更新填充颜色。

    【讨论】:

    • 没问题。我想如果你能干净利落地设置整个单元格背景会更好看。
    • @Anthonydouc 您将如何引用父级以更改背景颜色?我尝试使用 jquery 没有运气。还尝试调整内部 div 的大小,但没有成功
    • 我自己没试过。如果有可能获得父元素的 id,那么您可能会这样做。否则,如果可能的话,您可以尝试使用独立的 js 代码应用条件样式。
    猜你喜欢
    • 2014-05-01
    • 1970-01-01
    • 2017-06-03
    • 1970-01-01
    • 2014-05-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多