tooltip - 在多个绘图散景上同步工具提示
问题描述
我使用散景创建了一个网格图,该散景由多个垂直堆叠的折线图组成,enter code here
它们具有相同的 X 轴。我的要求是在将鼠标悬停在其中一个图表上的一个点上时,在所有图表上显示一个工具提示。尝试了多种方法,但不能找不到解决方案。如果有人能帮助我解决这个问题,那就太好了。
from bokeh.palettes import RdBu3, RdYlGn3
from bokeh.plotting import figure, output_notebook, show
from bokeh.io import show
from bokeh.models import ColumnDataSource, BoxAnnotation, Button, HoverTool, Text, Circle
from bokeh.models.callbacks import CustomJS
from bokeh.layouts import column, gridplot
from bokeh.models.widgets import TextInput, Div, Select
output_notebook()
#Main Data Source
source = ColumnDataSource(df)
#Filtering the data source based on some condition
df1 = df[Some_Condition]
#Filtered Data Source
sc = ColumnDataSource(df1)
#Callback to be executed on selecting a value from Select widget
callback_select = CustomJS(args=dict(source=source, sc=sc),code="""
var indices = [];
var val = cb_obj.value
sc.data['xx'] = []
sc.data['yy'] = []
sc.data['Date'] = []
for (var i = 0; i < source.get_length(); i++){
if (source.data['ZZ'][i] == val){
sc.data['xx'].push(source.data['xx'][i])
sc.data['yy'].push(source.data['yy'][i])
sc.data['Date'].push(source.data['Date'][i])
} else {
}
}
sc.change.emit();
""")
#Select Widget
select = Select(title="ZZ:", value="Select", options=["Opt1", "Opt2", "Opt3"], callback = callback_select)
#Tooltips to be displayed
TOOLTIPS = [("Value: ", "@{xx}")]
TOOLTIPS1 = [("Value: ", "@{yy}")]
#Tools to be shown on plot
_tools_to_show = 'box_zoom,pan,save,reset,tap,wheel_zoom,crosshair'
#First Chart
p1 = figure(x_axis_type="datetime", plot_height=200, tools = _tools_to_show)
p1.xaxis.visible = False
p1.xgrid.grid_line_color=None
p1.ygrid.grid_line_alpha=0.5
p1.xaxis.axis_label = 'Date'
p1.yaxis.axis_label = 'xx'
#Second Chart
p2 = figure(x_axis_type="datetime", plot_height=200, tools = _tools_to_show)
p2.xgrid.grid_line_color=None
p2.ygrid.grid_line_alpha=0.5
p2.xaxis.axis_label = 'Date'
p2.yaxis.axis_label = 'yy'
#Line charts
c11 = p1.line(x='Date', y='xx', source = sc, color = "green")
c12 = p1.circle(x='Date', y='xx', source = sc)
c21 = p2.line(x='Date', y='yy', source = sc, color = "blue")
c22 = p2.circle(x='Date', y='yy', source = sc)
#Text to be displayed over points on the charts.
visible_text1 = Text(x='Date', y='xx', text='xx', text_color='black', text_alpha=0.5)
visible_text2 = Text(x='Date', y='yy', text='yy', text_color='black', text_alpha=0.5)
#Adding text to the graphs
crt1 = p1.add_glyph(sc, visible_text, selection_glyph=visible_text1)
crt2 = p2.add_glyph(sc, visible_text2, selection_glyph=visible_text2)
#This piece of code does display multiple tooltips but shows vague behaviour viz. displaying a tooltip where there is no glyph
hover1 = HoverTool(renderers=[c12, c22], tooltips = TOOLTIPS)
hover2 = HoverTool(renderers=[c22, c12], tooltips = TOOLTIPS1)
#Adding hover tools
p1.add_tools(hover1)
p2.add_tools(hover2)
#Creating a grid for plotting
grid = gridplot([select, p1, p2, p3, p4], ncols=1, plot_width=1000, plot_height=1000)
show(grid)
解决方案
从 Bokeh 1.2 开始,还没有实现此目的的好方法。GitHub #1547上有一个关于此的未解决问题- 跨多个绘图的坐标工具提示,您可以关注更新或添加您的声音。
推荐阅读
- javascript - 如何改进清理嵌套对象的方法以删除空对象
- c# - 在方法中标记未修改的类参数
- python - os.path.join() 可能存在的错误
- python - 如何在 python 中为雅虎财经修复新的无法读取 URL 错误
- javascript - 无法在 Safari 或 iOS 中使用 JavaScript 设置 Cookie
- python - Django 为 WebView 返回一个带有 TokenAuthentication 的视图
- java - 我们可以使用 contains() 方法在变量中查找数字吗?
- python - 在python中替换小花车
- sql - 从具有动态元素名称的 JSON 列中读取
- c# - Devart:System.TypeLoadException:方法未在类型中实现