Question

我想创建一个数据表，该数据表根据伴随数据图中的选择（TapTool）填充数据。我尝试了以下代码，该代码显示了带有taptool友好圆圈的图表以及具有正确列且没有行的表。单击圆并没有向表中添加所需的行。

s1 = models.ColumnDataSource (data=dict(
    x=list(df[params['latitude']]),
    y=list(df[params['longitude']]),
    basename=list(df[params['name']])))

hover = models.HoverTool(tooltips=[
    ("Name", "@name"),
    ("Stock Number", "@nsn"),
    ("Quantity", "@qty"),
    ("Date of Last Inventory", "@doli{%F}")
])

# range bounds supplied in web mercator coordinates
p = plotting.figure(x_range=(-15000000, -7000000),
           y_range=(3000000, 6000000),
           x_axis_type="mercator",
           y_axis_type="mercator",
           title="Locations",
           tools=[hover, 'wheel_zoom','box_zoom','pan','reset','tap'])

p.add_tile(tile_providers.CARTODBPOSITRON)

p.circle(x = 'x',
     y = 'y',
     source=s1,
     line_color="#FF0000", 
     fill_color="#FF0000",
     size=10,
     fill_alpha=0.05)

s2 = models.ColumnDataSource(data=dict(x=[], y=[], name=[], qty=[]))

Columns = [models.widgets.TableColumn(field=Ci, title=Ci) for Ci in ["x", "y", "name"]] # bokeh columns
data_table = models.widgets.DataTable(columns=Columns, source = s2)

s1.callback = models.CustomJS(args=dict(s2=s2), code=""" 
        var inds = cb_obj.get('selected')['1d'].indices;
        var d1 = cb_obj.get('data');
        var d2 = s2.get('data');
        d2['x'] = []
        d2['y'] = []
        d2['name'] = []
        d2['qty'] = []

        for (i = 0; i < inds.length; i++) {
            d2['x'].push(d1['x'][inds[i]])
            d2['y'].push(d1['y'][inds[i]])
            d2['name'].push(d1['name'][inds[i]])
            d2['qty'].push(d1['qty'][inds[i]])
        }
        s2.trigger('change');
    """)

io.show(layouts.row(p, data_table))

预期的行为：点击图表上的某个数据点会在表格中填充数据（x，y坐标以及其他信息）

散景的互动情节和表格

0 个答案: