1
bokeh DataTableのタイトルとセルとポップアップメッセージのフォントサイズを調整しようとしています。 HTMLTamplateFormatterを使用してフォントサイズを増やすと、行の高さを増やす方法がわかりません。Bokeh DataTableの行の高さと書式を調整する方法
また、列のトップ/タイトルセルの書式設定/高さを調整する方法もわかりません。
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％に変更すると、テキストが行の高さよりも大きくなり、視覚化することができます。
誰でも私にこれを手伝ってもらえますか？
乾杯、 デイブ
最初の編集：
私が行うことができるようにしたいものを表示するには：私の場合は
私は、私が唯一の必要があるだろうと思います私はすべてのフォントサイズを同じにしたいので、1行の高さです。
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 ：
ソリューションでHTMLフォーマッタを使用するだけですか？おそらくCSSシートを使う方が簡単でしょう。各セルdivのスタイルを変更してサイズを増やすことができます。ホバーに関する情報については、セルの内容を変更しますか？私はスタンドアロンのjavascriptが最もクリーンな方法だと思います。 – Anthonydouc
私はHTMLフォーマッタを使用する必要はありません。私はHTML/CSSにあまり精通していません。私のボケの出力にこのようなCSSシートを追加する方法を説明できますか？私はbokehサーバーを使用しているときに、show（）を使用してそれを追加するのですか？そして、私のbokehテーブルにスタンドアロンのjavascriptを組み込むにはどうすればいいですか？ – DavedeKoning
あなたのための最小限の例を作成します。また、行の幅を変更することに関しては、それらのすべてが同じ幅になるようにしたいでしょうか？個々の行を変更することは非常に気に入らないでしょう。 – Anthonydouc