Question

我试图调整标题和单元格的字体大小以及散景DataTable的弹出消息。当使用HTMLTamplateFormatter这样做时，我可以增加字体大小，但是，我不知道如何增加行的高度。

此外，我也不知道如何调整列顶部/标题单元格的格式/高度。

我能够使用this问题提供的信息将标题加粗。是否有类似的代码可以用来增加字体大小。

当我想要显示某些信息时，我还想显示一些信息，我还想格式化，这可能吗？如果是这样的话？

这是我目前所拥有的最小例子：

import pandas

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


data = pandas.DataFrame({"x": [1, 2, 3, 4],
                     "y": [200, 3, 4, 5]})
source = ColumnDataSource(data=data)

columns = []

# column 1 with bold title: x and 200% font-size
template200 = """
<div title="<%= x %>" style="font-size: 200%">
<%= value %>
</div>
"""
htmltemplateformatter200 = HTMLTemplateFormatter(template=template200)
col = "x"
title = "<b>%s</b>" % col
columns.append(TableColumn(field=col, title=title,
                           width=50, editor=None,
                           formatter=htmltemplateformatter200))

# column 2 with normal title: y and 400% font-size

template400 = """
<div title="<%= x %>" style="font-size: 400%">
<%= value %>
</div>
"""
htmltemplateformatter400 = HTMLTemplateFormatter(template=template400)
col = "y"
columns.append(TableColumn(field=col, title=col,
                           width=50, editor=None,
                           formatter=htmltemplateformatter400))

data_table = DataTable(source=source, columns=columns, row_headers=False,
                       sortable=False)

show(data_table)

此代码将使表格单元格中的文本更大。但是，当我将大小更改为400％时，文本大于行的高度可以显示。

有人可以帮我吗？

干杯，戴夫

首先修改：

显示我想要做的事情：

在我的情况下，我认为我只需要一行高度，因为我希望所有字体大小都相同。

第二次修改：

在Okonomiyaki的回复之后，我再次查看了我的代码并提出了以下解决方案：

main.py：

import pandas

from bokeh.models import (ColumnDataSource, TableColumn, DataTable)
from bokeh.models.widgets import HTMLTemplateFormatter
from bokeh.io import curdoc


data = pandas.DataFrame({"x": [1, 2, 3, 4],
                        "y": [200, 3, 4, 5]})
source = ColumnDataSource(data=data)

columns = []

# column 1 with bold title: x and 20px font-size
template200 = """
<div title="<%= x %>" style="font-size: 20px;">
<%= value %>
</div>
"""
htmltemplateformatter200 = HTMLTemplateFormatter(template=template200)
col = "x"
title = "<b>%s</b>" % col
columns.append(TableColumn(field=col, title=title,
                           width=50, editor=None,
                           formatter=htmltemplateformatter200))


# column 2 with bold title: y and 20px font-size
template400 = """
<div title="<%= y %>" style="font-size: 20px;">
<%= value %>
</div>
"""
htmltemplateformatter400 = HTMLTemplateFormatter(template=template400)
col = "y"
columns.append(TableColumn(field=col, title=col,
                           width=50, editor=None,
                           formatter=htmltemplateformatter400))

data_table = DataTable(source=source, columns=columns, row_headers=False,
                       sortable=False, height=1000, fit_columns=True)

curdoc().add_root(data_table)

的index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $(function() {
    $( document ).tooltip();
  });
  </script>
    <meta charset="utf-8">
    {{ bokeh_css }}
    {{ bokeh_js }}
    <style>
      {% include 'jquery-ui.css' %}
      {% include 'styles.css' %}
    </style>
  </head>

  <body>
    <div class="content">
      {{ plot_div|indent(8) }}
    </div>
    {{ plot_script|indent(8) }}
  </body>
</html>

styles.css的：

.ui-tooltip {
padding: 8px;
position: absolute;
z-index: 9999;
max-width: 500px;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 0 0 5px #aaa;
opacity: 1;
font-size: 20px;
}

Answer 1

事实证明，使用data_table不可能有可变的行高。这是由底层Js库设置的限制 - Slick Grid。

https://groups.google.com/a/continuum.io/forum/#!topic/bokeh/cg01WWfpdhw 这里有一些与散景有关的讨论。

但是你可以在每一行上轻松拥有变量样式，这可以在python中设置。使用外部css表更容易完成文本/样式更改 - 虽然可以在HTML格式化程序中完成，但非常混乱。

创建以下应用程序结构:(在命令提示符下运行，键入bokeh serve --show myapp）

myapp
   |
   +---main.py
   |---templates
           +---index.html
           +---styles.css

main.py （包含在myapp目录中）：

import pandas

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


x0 = [1,"8px", "red", "bold", "hover 1"]
x1 = [2,"10px", "blue", "italic", "hover 2"]
x2 = [3,"12px", "green", "bold", "hover 3"]
x3 = [4,"14px", "orange", "strong", "hover 4"]
x = [x0,x1,x2,x3]
data = pandas.DataFrame({"x": x,
                     "y": [200, 3, 4, 5]})
source = ColumnDataSource(data=data)

columns = []

# now in the formatter value[0] = original x value
# value[1] = desired font size
# value[2] = desired font color
# value[3] = desired font style
# value[4] = text to display on hover
# you could feed in any styles you want, or do it externally via css + js
template200 = """
<div title="<%= x %>" style="font-size: <%= value[1]%> ; 
color: <%=value[2]%>; font-weight:<%=value[3] %>;" >
<div class = "parent_div"> 
<span class="nonhover"> <%= value[0] %> </span>
<span class= "cell_hover"><%= value[4]%></span> </div>
</div>
"""
htmltemplateformatter200 = HTMLTemplateFormatter(template=template200)
col = "x"
title = "<b>%s</b>" % col
columns.append(TableColumn(field=col, title=title,
                           width=50, editor=None,
                           formatter=htmltemplateformatter200))

# column 2 with normal title: y and 400% font-size

template400 = """
<div title="<%= x %>" style="font-size: 20px;">
<%= value %>
</div>
"""
htmltemplateformatter400 = HTMLTemplateFormatter(template=template400)
col = "y"
columns.append(TableColumn(field=col, title=col,
                           width=50, editor=None,
                           formatter=htmltemplateformatter400))

data_table = DataTable(source=source, columns=columns, row_headers=False,
                       sortable=False,height = 1000, fit_columns=True)

curdoc().add_root(data_table)

styles.css （包含在目录模板中）基本上你在div中有两个跨度。将鼠标悬停在其上时，其中一个将display属性设置为none - 因此不可见。之前不可见的另一个跨度将其显示设置为内联，变得可见。您可以通过此更改悬停在文本上的样式。

另请注意，因为两个跨度都包含在通过python设置样式的外部div中，所以悬停和默认文本都具有相同的css样式属性。

.nonhover{
display: inline;
}

.cell_hover{
display: none;
background: yellow;
}

.parent_div:hover .nonhover{
display: none;
}

.parent_div:hover .cell_hover{
display: inline;
background: yellow;
}

index.html （包含在目录模板中）

<!DOCTYPE html>
<html lang="en">
  <head>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
    <meta charset="utf-8">
    {{ bokeh_css }}
    {{ bokeh_js }}
    <style>
      {% include 'styles.css' %}
    </style>
  </head>

  <body>
    <div class="content">
      {{ plot_div|indent(8) }}
    </div>
    {{ plot_script|indent(8) }}
  </body>
</html>

希望仍有帮助。

如何在Bokeh DataTable

1 个答案: