在Bokeh中如何实现跨图表的数据联动

avatar
作者
筋斗云
阅读量:5

要在Bokeh中实现跨图表的数据联动,可以使用ColumnDataSource来管理数据,并使用CustomJS来编写JavaScript代码实现数据联动。以下是一个简单的示例:

from bokeh.plotting import figure, show from bokeh.layouts import gridplot from bokeh.models import ColumnDataSource, CustomJS  # 创建两个图表 p1 = figure(width=300, height=300) p2 = figure(width=300, height=300)  # 创建数据源 source = ColumnDataSource(data={'x': [1, 2, 3, 4, 5], 'y': [6, 7, 2, 4, 5]})  # 在第一个图表上绘制散点图 p1.circle('x', 'y', source=source)  # 在第二个图表上绘制折线图 p2.line('x', 'y', source=source)  # 定义JavaScript回调函数 callback = CustomJS(args=dict(source=source), code="""     // 获取选中的数据索引     var selected_index = cb_obj.selected.indices[0];          // 获取选中的数据     var data = source.data;     var x = data['x'][selected_index];     var y = data['y'][selected_index];          // 更新数据源     source.data['x'] = [x];     source.data['y'] = [y];     source.change.emit(); """)  # 将JavaScript回调函数绑定到第一个图表上 p1.js_on_event('tap', callback)  # 将两个图表放在一个grid中显示 grid = gridplot([[p1, p2]])  show(grid) 

在这个例子中,我们创建了两个图表p1p2,并使用同一个数据源source来管理数据。然后,我们定义了一个JavaScript回调函数callback,当用户在第一个图表上点击某个点时,会触发这个回调函数,更新数据源中的数据,从而实现了跨图表的数据联动效果。最后,我们将两个图表放在一个grid中显示。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!