如何使用 HTMLTemplateFormatter 调整散景数据 table 中的数字格式？

Question

如何调整HTMLTamplateFormatter中数据的数字格式。我希望数字格式为“（0,0）”。这是错误尝试的示例代码：

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

dict1 = {'x':[0]*6,'y':[500,1000,-1000,1000,-5000,500],'z':[0,0,1,1,1,2]}
source = ColumnDataSource(data=dict1)

template="""
<b><div style="background:<%= 
    (function colorfromint(){
        if(z == 1){
            return("NavajoWhite")}
        else{if(z == 2){
            return("Orange")}
        else{return("")}
        }}()) %>;
       font-style:'(0,0)'"> ### this part needs fixed
<%= value %></div></b>
"""

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)

show(data_table)

Answer 1

您应该注意的几件事。这个例子有点像 hack，涉及根据 javascript 设置 css 属性。正在设置的属性是 css 属性，因此无法通过 css 更改数字格式。

您有两种选择 - 一种是格式化 python 中的所有值并将它们传递到数据 table。

第二个选项是更多 javascript 代码。

这是我在 javascript.

中使用 .toFixed(digits) 函数的示例

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

dict1 = {'x':[0]*6,
'y':[500.23,1000,-1000.234,1000,-5000.23,500],
'z':[0,0,1,1,1,2]}
source = ColumnDataSource(data=dict1)

template="""
<b><div style="background:<%= 
    (function colorfromint(){
        if(z == 1){
            return("NavajoWhite")}
        else{if(z == 2){
            return("Orange")}
        else{return("")}
        }}()) %>;">
<%= (value).toFixed(1) %></div></b>
"""

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)

show(data_table)

顺便说一句，我还应该让您知道，您可以选择 python 中的所有条件颜色并将它们传递给每个值 - 因此消除了模板中的任何复杂代码。

这是一个示例，向您展示如何使用 python 中设置的颜色：（显然，您可以使用规则根据值为颜色生成 rgb/strings）。

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

dict1 = {'x':[0]*6,
'y':[500.23,1000,-1000.234,1000,-5000.23,500],
'z':[0,0,1,1,1,2],
'color':['red','green','purple','blue','grey','white']}
source = ColumnDataSource(data=dict1)

template="""
<b><div style="background:<%= color%>;">
<%= (value).toFixed(1) %></div></b>
"""

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)

show(data_table)

如何使用 HTMLTemplateFormatter 调整散景数据 table 中的数字格式？

How do I adjust number format in bokeh data table using HTMLTemplateFormatter?

html

datatable

bokeh