添加悬停以绘制具有多个垂直条的散景答案

【问题标题】：Add hover to plot with multiple vertical bars Bokeh添加悬停以绘制具有多个垂直条的散景
【发布时间】：2018-06-19 21:55:30
【问题描述】：

所以我基本上遵循了散景文档网站上关于处理分类数据的示例：

https://docs.bokeh.org/en/latest/docs/user_guide/categorical.html

最终我得到了这段代码（我简化了一点）：

# dictionary with data for making a figure
data = {'continents' : continents,
        '2016' : list2016,
        '2017' : list2017,
        '2018' : list2018 }


source = ColumnDataSource(data=data)

p = figure(x_range=continents, y_range=(0, 450), plot_height=250, title="University count per continent per year",
           toolbar_location=None, tools="")

p.vbar(x=dodge('continents', -0.25, range=p.x_range), top='2016', width=0.2, source=source,
       color="#c9d9d3", legend=value("2016"))

p.vbar(x=dodge('continents',  0.0,  range=p.x_range), top='2017', width=0.2, source=source,
       color="#718dbf", legend=value("2017"))

p.vbar(x=dodge('continents',  0.25, range=p.x_range), top='2018', width=0.2, source=source,
       color="#e84d60", legend=value("2018"))

p.x_range.range_padding = 0.1
p.xgrid.grid_line_color = None
p.legend.location = "top_right"
p.legend.orientation = "horizontal"

其中数据列有 4 个键，大洲是“类别”，2016、2017 和 2018 是与大洲列表中的每个大洲对应的值列表。比如：

continents = ["Africa", "Europe"]
list2016 = ["1", "3"] 
list2017 = ["4", "2"]
list2018 = ["14", "3"]

所以这基本上是非洲在 2016 年、2017 年和 2018 年分别有 1 件、4 件和 14 件东西。现在我想做的是在这些不同的垂直条上添加悬停，这样如果我悬停在某个条上，它会给我那个年份/大陆的数字计数。这可能吗？

【问题讨论】：

标签： python bokeh

【解决方案1】：

由于0.13，您可以为每个字形赋予name 值，然后在工具提示中将其称为$name。此外，您可以使用@$name 从具有该名称的列中查找。为方便起见，您也可以直接将tooltips 传递给figure。一起来：

p = figure(x_range=continents, y_range=(0, 20), plot_height=250,
           title="University count per continent per year",
           toolbar_location=None, tools="hover", 
           tooltips="@continents $name: @$name")

p.vbar(x=dodge('continents', -0.25, range=p.x_range), top='2016', width=0.2, source=source,
       color="#c9d9d3", legend=value("2016"), name="2016")

p.vbar(x=dodge('continents',  0.0,  range=p.x_range), top='2017', width=0.2, source=source,
       color="#718dbf", legend=value("2017"), name="2017")

p.vbar(x=dodge('continents',  0.25, range=p.x_range), top='2018', width=0.2, source=source,
       color="#e84d60", legend=value("2018"), name="2018")

【讨论】：

效果很好，谢谢！这背后的逻辑究竟是什么？ $ 是什么意思？
@ 表示来自特定列的数据，例如。@sale 表示从“销售”列获取数据。 $ 变量是一些特殊的已知变量，例如$x 表示鼠标 x 位置，$name 表示命中字形的“名称”属性值。 @$name 结合了两者——查找列，但使用特殊变量$name 的值作为列名（即间接级别）

【解决方案2】：

感谢@bigreddot 的回答！我想补充一点我一直在努力解决的重要问题。确保name 参数的值与top 参数的值相同。 @$name 使用字符串文字（即 name 参数的值）来查找具有该名称的列的源。如果不匹配，那么您会得到错误的值，或者如果 name 的值与源中的任何列名都不匹配，则会得到 ???。

我已经覆盖了下图中的弹出窗口： Bokeh vbar dodge unrendered values

【讨论】：