Question

我有一个带有分类x轴的BokehJS图，其中的因子具有非常长的字符串。标签的边缘正在切断标签，我希望能够手动或自动插入换行符，以生成一个短长度的字符串（因为它现在更高但更窄，中间有一个新行）。我尝试了以下代码，但似乎没有在外观上创建更改。

p.x_range.attributes['factors'][0] = 'Some very long text string\nthat has now been cut'

Answer 1

直到Bokeh为xaxis ticks添加CSS渲染或添加对新行字符的支持。这是一种可以满足您要求的解决方法，但它并不完美。

我们可以使用占位符x值绘制正常的数据，而不是使用因子范围。然后，我们可以将标签置于y_axis下的那些占位符位置，然后可以通过css进行渲染，这将正确地打印换行符。

以下是使用Bokeh服务器的工作示例。

main.py

from bokeh.plotting import ColumnDataSource, figure
from bokeh.models import LabelSet, FixedTicker
from bokeh.io import curdoc, show


factors = ["Some very long text string\nthat has now been cut\na",
           "Some very long text string\nthat has now been cut\nb"]
y = [50, 40]

# arbitrary placeholders which depends on the length and number of strings
x = [0, 2]
x_label = [0.65, 2.65]  # This is offset is based on the length of the string
y_label = [-2, -2]  # offset under the plot

source = ColumnDataSource(
    data=dict(factors=factors, x=x, y=y, x_label=x_label, y_label=y_label))

p = figure(x_range=(-1, 3), y_range=(0, 52))

p.circle(x='x', y='y', size=15, fill_color="orange", source=source)
p.xaxis.ticker = FixedTicker(ticks=x)

p.xaxis.major_label_text_font_size = '0pt'  # turn off x-axis tick labels
# p.xaxis.major_tick_line_color = None  # turn off x-axis major ticks
p.xaxis.minor_tick_line_color = None  # turn off x-axis minor ticks

labels = LabelSet(x='x_label', y='y_label', text='factors', source=source,
                  level='overlay', render_mode='css', text_align='center')

p.add_layout(labels)

curdoc().add_root(p)

styles.css的

.bk-annotation-child {
    white-space: pre-wrap;
    text-align: center;
}

此方法的主要缺点是x_labels必须在x轴上从占位符x值手动偏移。这是因为从LabelSet调用的内置散景居中是在全长字符串上计算的，而不是\n之间不是最长的子字符串。我确信你可以修改这个答案，并以编程方式确定任意字符串的正确偏移量，而不是像我一样对它进行眼球调整。

在BokehJS

1 个答案: