在bokeh python 2.7中绘制图形on_click数据表行选择

Question

我想从以下代码中,当用户点击数据表中的一行然后在回调事件时,我想绘制有关日期的其他数据.

 from datetime import date
 from random import randint 
 from bokeh.models import ColumnDataSource
 from bokeh.models.widgets
 import DataTable, DateFormatter, TableColumn
 from bokeh.io import output_file, show, vform

 output_file("data_table.html")

 data = dict(
         dates=[date(2014, 3, i+1) for i in range(10)],
         downloads=[randint(0, 100) for i in range(10)],
     )
 source = ColumnDataSource(data)

 columns = [
         TableColumn(field="dates", title="Date", formatter=DateFormatter()),
         TableColumn(field="downloads", title="Downloads"),
     ] 

 data_table = DataTable(source=source, columns=columns, width=400, height=280)

 show(vform(data_table))

基本上,当我点击data_table中的一行时,我想显示对应于第一列名称的图(在这种情况下为日期)

我对bokeh很新,所以我不太明白事件监听器在数据表上的on_click上的位置.

任何帮助将不胜感激..

Answer 1

这适用于bokeh-server (0.12.3) 应用程序：

from datetime import date
from random import randint
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn

import bokeh.layouts as layouts
import bokeh.models.widgets as widgets
from bokeh.io import curdoc

from bokeh.charts import Line
import numpy as np

data = dict(
    dates=[date(2014, 3, i + 1) for i in range(10)],
    downloads=[randint(0, 100) for i in range(10)],
)
d_source = ColumnDataSource(data)

columns = [
    TableColumn(field="dates", title="Date", formatter=DateFormatter()),
    TableColumn(field="downloads", title="Downloads"),
]

data_table = DataTable(source=d_source, columns=columns, width=400, height=280)
data_table.row_headers = False


def table_select_callback(attr, old, new):
    selected_row = new['1d']['indices'][0]
    download_count = data['downloads'][selected_row]
    chart_data = np.random.uniform(0, 100, size=download_count)
    fig = Line(chart_data, height=250, width=600)
    fig.title.text = "Download times - {}".format(data['dates'][selected_row])
    root_layout.children[1] = fig


d_source.on_change('selected', table_select_callback)

root_layout = layouts.Column(data_table, widgets.Div(text='Select Date'))
curdoc().add_root(root_layout)

注意：可以使用另一个 ColumnDataSource 作为折线图并将更改推送到它。这样您就可以避免点击时完全重绘，从而获得更好的用户体验。