来自不同列的 Bokeh Hovertool 数据答案

【问题标题】：Bokeh Hovertool Data from Separate Columns来自不同列的 Bokeh Hovertool 数据
【发布时间】：2020-12-26 18:40:23
【问题描述】：

我在 Bokeh 中显示 100% 堆叠条形图，以显示类别的百分比，此处为 (A,B)。类别 A,B... 将代表数据集的前 x 个类别，因此它们的类别对于每一行将不同。一排可能是猫、狗。下一个可能来自猫、鸟。所以我有另一组列 [A_label]... 来显示这些类别。 hovertool 当前显示列名和值，即 [A_perc : 0.500]。但我希望它显示标签和实际值，[cats: 1]。有没有办法用悬停工具来完成这个？

from bokeh.plotting import figure
from bokeh.io import show
from bokeh.palettes import magma
import pandas as pd

data = pd.DataFrame(
    {
        'entries' : ['0','1','2','3'],
        'A_perc' : [1,0.5,0.2,0],
        'B_perc' : [0,0.5,0.8,1],
        'A_vals' : [2,1,2,0],
        'B_vals' : [0,1,8,1],
        'A_label' : ['cats', 'dogs', 'birds', 'cows'],
        'B_label' : ['dogs', 'birds', 'mice', 'deer']
    }
)

p = figure(
    x_range=['0','1','2','3'], 
    plot_height=400, 
    plot_width=650, 
    toolbar_location=None, 
    background_fill_alpha=0.0,
    background_fill_color = None,
    border_fill_color = None,
    outline_line_color = None,
    tools="hover", 
    tooltips="$name: @$name"
)

colors = magma(2)
p.vbar_stack(
    ['A_perc','B_perc'], 
    x='entries', 
    width=0.9, 
    color=colors, 
    source=data, 
    legend_label=['A_perc','B_perc'], 
)

show(p)

【问题讨论】：

标签： python pandas bokeh

【解决方案1】：

这可以使用自定义悬停工具来实现。只需在图形定义中替换一行即可。

# tooltips="$name: @$name" 
tooltips=TOOLTIPS

并在图形的定义之前添加一些 HTML。

TOOLTIPS = """
    <div>
        <div>
            <span style="font-size: 12px; color: #05ABFF;">@A_label:</span>
            <span style="font-size: 12px; color: #000;">@A_vals</span>
        </div>
        <div>
            <span style="font-size: 12px; color: #05ABFF;">@B_label:</span>
            <span style="font-size: 12px; color: #000;">@B_vals</span>
        </div>
    </div>
"""

确保使用div-tags 中的源代码提供的（正确的）列名。

评论：此解决方案始终显示两个绝对值（A 和 B）。所以工具提示总是有两个条目。

如需了解更多信息，请阅读documentation about tooltips。

完整示例

from bokeh.plotting import figure, output_notebook
from bokeh.io import show
from bokeh.palettes import magma
import pandas as pd
output_notebook()

data = pd.DataFrame(
    {
        'entries' : ['0','1','2','3'],
        'A_perc' : [1,0.5,0.2,0],
        'B_perc' : [0,0.5,0.8,1],
        'A_vals' : [2,1,2,0],
        'B_vals' : [0,1,8,1],
        'A_label' : ['cats', 'dogs', 'birds', 'cows'],
        'B_label' : ['dogs', 'birds', 'mice', 'deer']
    }
)

TOOLTIPS = """
    <div>
        <div>
            <span style="font-size: 12px; color: #05ABFF;">@A_label:</span>
            <span style="font-size: 12px; color: #000;">@A_vals</span>
        </div>
        <div>
            <span style="font-size: 12px; color: #05ABFF;">@B_label:</span>
            <span style="font-size: 12px; color: #000;">@B_vals</span>
        </div>
    </div>
"""

p = figure(
    x_range=['0','1','2','3'], 
    plot_height=400, 
    plot_width=650, 
    toolbar_location=None, 
    background_fill_alpha=0.0,
    background_fill_color = None,
    border_fill_color = None,
    outline_line_color = None,
    tooltips=TOOLTIPS,
)

colors = magma(2)
p.vbar_stack(
    ['A_perc','B_perc'], 
    x='entries', 
    width=0.9, 
    color=colors, 
    source=data, 
    legend_label=['A_perc','B_perc'], 
)

show(p)

输出

【讨论】：