将悬停工具提示添加到散景直方图

Posted 2023-05-08

【中文标题】将悬停工具提示添加到散景直方图

【英文标题】：Adding hover tool tip to bokeh histogram

【发布时间】：2015-05-07 02:21:41

【问题描述】：

我使用以下代码在 bokeh 中创建了一个直方图：

TOOLS="pan,wheel_zoom,box_zoom,reset,hover"

for column in valid_columns:
    output_file_name = str( file_name + column + ".html" )
    data_values = stats[ column ].tolist()

    output_file( output_file_name )
    histogram, edges = np.histogram( data_values, bins=50 )

    source = ColumnDataSource(
        data = dict( data_value = data_values ) )

    p1 = figure( title = column, background_fill="#E8DDCB", tools=TOOLS )
    p1.quad( top = histogram, bottom = 0, left = edges[ :-1 ], right = edges[ 1: ], 
             fill_color = "#036564", line_color = "#033649" ) 

    hover = p1.select(dict(type=HoverTool))
    hover.tooltips = [ ( "Value", "@data_value" ) ]

    show( p1 )
    print( "Saved Figure to ", output_file_name )   

其中有效列是我想在 pandas 数据框中检查的所有列的列表。我正在尝试添加一个悬停工具提示，它将显示每个垃圾箱中存储的项目数量，但我无法这样做。任何帮助，将不胜感激。

【参考方案1】：

如果您不想使用ColumnDataSource，可以将@data_value 替换为@top，它应该可以在最少的编辑下工作：

hover = HoverTool(tooltips = [('Value', '@top')])
p.add_tools(hover)

即以这种方式编辑示例histogram.py 也可以：

from bokeh.models import HoverTool

def make_plot(title, hist, edges, x, pdf, cdf):
    p = figure(title=title, tools='', background_fill_color="#fafafa")
    p.quad(top=hist, bottom=0, left=edges[:-1], right=edges[1:],
       fill_color="navy", line_color="white", alpha=0.5)
    p.line(x, pdf, line_color="#ff8888", line_width=4, alpha=0.7, legend_label="PDF")
    p.line(x, cdf, line_color="orange", line_width=2, alpha=0.7, legend_label="CDF")

    p.y_range.start = 0
    p.legend.location = "center_right"
    p.legend.background_fill_color = "#fefefe"
    p.xaxis.axis_label = 'x'
    p.yaxis.axis_label = 'Pr(x)'
    p.grid.grid_line_color="white"
    hover = HoverTool(tooltips = [('Density', '@top')])
    p.add_tools(hover)
    return p

【参考方案2】：

您似乎遗漏了几件事：

拥有与histogram 长度相同的source，而不是data_values。更具体地说，我认为您希望您的 source 是：

source = ColumnDataSource( data = dict( data_value = histogram ) )

将source 添加到您的p1.quad 呼叫中，即

p1.quad( top = histogram, bottom = 0, left = edges[ :-1 ], right = edges[ 1: ], 
         fill_color = "#036564", line_color = "#033649", source = source ) 

【讨论】：

提醒一下，在不久的将来，将不鼓励在用户提供的源中混合命名列和自动创建的列（来自文字数据值）。 （因为这样做会修改用户提供的源，这可能是意外和不需要的）我建议将 top、left 和 right 列也放在源中。

@bigreddot 您如何将top、left 和right 放入源代码中？在直方图库 (docs.bokeh.org/en/latest/docs/gallery/histogram.html) 中，这些参数仍然在使用，如 NublicPablo 的回答所示，还是我遗漏了什么？

用户指南中介绍了如何加载和使用 CDS：docs.bokeh.org/en/latest/docs/user_guide/data.html