在散景中悬停多行字形时如何显示单个值？

Posted 2023-05-08

【中文标题】在散景中悬停多行字形时如何显示单个值？

【英文标题】：How to show a single value when hovering a Multiline glyph in Bokeh?

【发布时间】：2018-10-24 06:01:12

【问题描述】：

就目前而言，我看到 Bokeh 支持 HoverTool 用于多线字形。 但问题是，如果我想显示点的特定值 - 它会显示所有值列表而不是它。

请看下面的例子：

from bokeh.plotting import show, figure
from bokeh.models import ColumnDataSource, HoverTool

df = 'X_value': [[1, 2, 3, 4], [1, 2, 3, 4], [1, 2, 3, 4], [1, 2, 3, 4]], 
      'model': ['m1', 'm1', 'm2', 'm2'], 
      'color': ['red', 'red', 'blue', 'blue'],
      'Y_value': [[0.50, 0.66, 0.70, 0.67], [0.65, 0.68, 0.71, 0.66], [0.80, 0.79, 0.84, 0.80], [0.80, 0.83, 0.76, 0.64]]

source = ColumnDataSource(df)

p = figure(plot_height=400)
p.multi_line(xs='X_value', ys='Y_value', legend="model", color='color',
             line_width=5, line_alpha=0.6, hover_line_alpha=1.0,
             source=source)

p.add_tools(HoverTool(show_arrow=False, line_policy='next', tooltips=[
    ('X_value', '@X_value'),
    ('Y_value', '@Y_value')
]))

show(p)

我知道 $x, $y 的能力，但它显示在鼠标下是协调的，并且随着你移动鼠标它们会发生变化，这是不希望的行为。

有没有办法在多行字形中显示悬停点的准确值？

附言创建隐形线不是一个解决方案，因为我有更高级的图，带有过滤和链接图等。

谢谢！

【参考方案1】：

如果您更新到散景版本 0.12.16，您可以像这样使用新类 CustomJSHover：

from bokeh.plotting import show, figure
from bokeh.models import ColumnDataSource, HoverTool
from bokeh.models.tools import CustomJSHover


df = 'X_value': [[1, 2, 3, 4], [1, 2, 3, 4], [1, 2, 3, 4], [1, 2, 3, 4]], 
      'model': ['m1', 'm1', 'm2', 'm2'], 
      'color': ['red', 'red', 'blue', 'blue'],
      'Y_value': [[0.50, 0.66, 0.70, 0.67], [0.65, 0.68, 0.71, 0.66], [0.80, 0.79, 0.84, 0.80], [0.80, 0.83, 0.76, 0.64]]

source = ColumnDataSource(df)

p = figure(plot_height=400)
p.multi_line(xs='X_value', ys='Y_value', legend="model", color='color',
             line_width=5, line_alpha=0.6, hover_line_alpha=1.0,
             source=source)

x_custom = CustomJSHover(code="""
    return '' + special_vars.data_x
""")

y_custom = CustomJSHover(code="""
    return '' + special_vars.data_y
""")

p.add_tools(
    HoverTool(
        show_arrow=False, 
        line_policy='next',
        tooltips=[
            ('X_value', '@X_valuecustom'),  # or just ('X_value', '$data_x')
            ('Y_value', '@Y_valuecustom')
        ],
        formatters=dict(
            X_value=x_custom,
            Y_value=y_custom
        )
    )
)

show(p)

【讨论】：

酷。不知道他们已经更新了库。如果他们将 data_x 和 data_y 添加到标准 HoverTool，那就太棒了。 smth like $data_x 和 $data_y 类似于其余的 vars。

顺便说一句！我已经检查过 =) 它没有在文档中记录，但 $data_x 也确实可用。所以你可以使用默认的 HoverTool 没有 js，并写 ('value', '$data_x')

不错，更好

啊！ The docs are already updated

【参考方案2】：

根据 Dmitriy 在上述答案中的评论，他说 data_x 和 data_y 现在已公开，因此您只需将代码更改为：

p.add_tools(HoverTool(show_arrow=False, line_policy='next', tooltips=[
    ('X_value', '$data_x'),
    ('Y_value', '$data_y')
]))

但这样做的好处是您可以使用 Bokeh 格式化程序。例如这是我用于日期时间轴上的值，例如：

plot.add_tools(HoverTool(tooltips=
    [
        ('Date',  '$data_x%F'),
        ('Level', '$data_y0,0.000000'),
        ('Ticket', '@ticket')
    ],
    formatters=
        '$data_x': 'datetime',
    
))