Диаграмма выбора кликов из таблицы данных в Боке - PullRequest
Новая
       9

Диаграмма выбора кликов из таблицы данных в Боке

0 голосов
/ 03 мая 2019

Я взял приведенный ниже код из другого источника - это не мой собственный код.

Код позволяет вам выбрать ячейку в таблице данных, и данные для загрузки для этой ячейки будутграфик, основанный на строке выбранной ячейки.

Как расширить этот код таким образом, чтобы, если у меня было несколько переменных (например, «downloads» и «uploads») и т. Д. Больше столбцов в таблице данных, я мог отображать данные на основе этой ячейки (гдестрока И столбец важны)?В качестве альтернативы, как я могу определить в качестве переменной номер столбца выбранной ячейки (таким же образом selected_row ниже может использоваться для определения номера строки)? 

from datetime import date
from random import randint
from bokeh.models import ColumnDataSource, Column
from bokeh.plotting import figure, curdoc
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn, Div
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)

def table_select_callback(attr, old, new):
    selected_row = new[0]
    download_count = data['downloads'][selected_row]
    chart_data = np.random.uniform(0, 100, size = download_count)
    p = figure(title = 'bla')
    r = p.line(x = range(len(chart_data)), y = chart_data)
    root_layout.children[1] = p

d_source.selected.on_change('indices', table_select_callback)

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

Ответы [ 2 ]

1 голос
/ 07 мая 2019

Это последний рабочий код (запускается из командной строки с bokeh serve --show app.py): 

from datetime import date
from random import randint
from bokeh.models import ColumnDataSource, Column, TableColumn, DateFormatter, DataTable, CustomJS
from bokeh.plotting import figure, curdoc

source = ColumnDataSource(dict(dates = [date(2014, 3, i + 1) for i in range(10)], downloads = [randint(0, 100) for i in range(10)]))
columns = [TableColumn(field = "dates", title = "Date", formatter = DateFormatter()), TableColumn(field = "downloads", title = "Downloads")]
data_table = DataTable(source = source, columns = columns, width = 400, height = 280, editable = True, reorderable = False)
info_source = ColumnDataSource(dict(row = [], column = []))

source_code = """
var grid = document.getElementsByClassName('grid-canvas')[0].children;
var row, column = '';

for (var i = 0,max = grid.length; i < max; i++){
    if (grid[i].outerHTML.includes('active')){
        row = i;
        for (var j = 0, jmax = grid[i].children.length; j < jmax; j++)
            if(grid[i].children[j].outerHTML.includes('active')) {
                column = j; 
                source2.data = {row: [row], column: [column]};
            }
    }
}"""

callback = CustomJS(args = dict(source = source, source2 = info_source), code = source_code)
source.selected.js_on_change('indices', callback)

def py_callback(attr, old, new):
    source.selected.update(indices = [])
    print(info_source.data)

source.selected.on_change('indices', py_callback)
curdoc().add_root(Column(data_table))
0 голосов
/ 03 мая 2019

Я предлагаю использовать мой другой пост , который использует обратный вызов JS для доступа к строке и столбцу выбранной ячейки. Это должен быть обратный вызов JS, поскольку он использует элементы HTML для обхода. Итак, шаги следующие:

  1. Определите новый ColumnDataSource, который будет содержать номер строки и столбца выбранной ячейки

    info_source = ColumnDataSource(dict(row = [], column = []))

  2. Используйте обратный вызов JS из этого поста , чтобы заполнить значения row и column в этом новом table_info_source следующим образом:

callback=CustomJS(args=dict(source=d_source,source2=info_source),code=source_code)
source.selected.js_on_change('indices', callback)

  1. В хранилище обратных вызовов JS индексы row и column выглядят следующим образом:

    source2.data = {row:[row],column:[column]};

  2. Получите доступ к информации info_source.data в вашем обратном вызове Python, чтобы нарисовать график

    print (info_source.data)

Оба обратных вызова присоединены к одному и тому же источнику, но обычно сначала выполняется обратный вызов JS, поэтому данные должны быть доступны в обратном вызове Python вовремя. Имея индекс строки и столбца выбранной ячейки, вы сможете получить необходимые данные и нарисовать график.

...