如何在bokeh中获得x -coordinates和y坐标

Question

我正面临着如何使用Tap工具在bokeh中显示图形上的x和y坐标的问题

我已经尝试了下面的代码。现在我想为攻丝工具写一个回调，我该怎么做呢？如何在单击正方形时显示x和y坐标

  from bokeh.models import ColumnDataSource, OpenURL, TapTool
  from bokeh.plotting import figure, output_file, show

  output_file("openurl.html")

  p = figure(plot_width=400, plot_height=400,
               tools="tap", title="Click the Dots")

  source = ColumnDataSource(data=dict(x=[1, 2, 3, 4, 5], y=[2, 5, 8, 2, 
                         7]))


  p.square('x', 'y', color='green', size=20, source=source)

  taptool = p.select(type=TapTool)

  show(p)

Answer 1

您可以通过编写一个在选择更改时调用的回调来获得点击时的x和y坐标。可以在source.selected.indices中找到当前所选字形的索引。这些索引可用于从source.data获取x和y坐标。这段代码在浏览器(F12)的控制台中打印x和y坐标。

from bokeh.models import ColumnDataSource, TapTool, CustomJS
from bokeh.plotting import figure, output_file, show

output_file("openurl.html")

p = figure(plot_width=400, plot_height=400,
             tools="tap", title="Click the Dots")

source = ColumnDataSource(data=dict(x=[1, 2, 3, 4, 5], y=[2, 5, 8, 2, 7]))

p.square('x', 'y', color='green', size=20, source=source)

callback = CustomJS(args=dict(source=source), code="""
    var selectedIndex = source.selected.indices;
    for (var i = 0; i < selectedIndex.length; i++) {
        console.log("Index:", selectedIndex[i]);
        console.log("x:", source.data['x'][selectedIndex[i]]);
        console.log("y:", source.data['y'][selectedIndex[i]]);
    }
""")

taptool = p.select(type=TapTool)
source.selected.js_on_change('indices', callback)
show(p)