0

我使用 django 制作了一个散景条形图和一个来自 pandas 数据框的数据表，它们在网页上彼此相邻显示。我想单击条形图并根据条形图的标题更改显示的数据表行。

我在下面举了一个例子。根据示例，我想单击条形图上的条并检索条的名称（水果标签之一）。然后，如果条形图名称与列中的字符串相同，我想过滤数据框（仅在示例中列出）。例如：如果我单击名为“apple”的条形图栏，则应显示“word”列值等于 apple 的数据框行。

我一直在尝试使用 js_on_event 和 js_on_change 执行此操作，但无法读取任何内容。有没有办法做到这一点？或者甚至只是为了在点击时阅读列的名称？

def indexPage(request):
fruits = ["apple", "banana","carrot","daikon","eggplant","fig","grape"]
count = [1,2,3,4,5,6,7]

data = {'fruits' : fruits,
        'count'   : count}

source = ColumnDataSource(data=data)

p = figure(y_range=fruits, sizing_mode='scale_width',toolbar_location='right',tools=['tap', 'reset'])

p.hbar(y='fruits', right="count",height=0.9,selection_color='deepskyblue', nonselection_color='lightgray',nonselection_alpha=0.3,source=source)
hover = HoverTool(tooltips=[("word","@fruits"),("count","@count")])
p.add_tools(hover)

script, div = components(p)
########################################################################################################
text = ["apples r red", "banana is yelo","carrt is loong","daikon is long","eggplants r","figs are the food","grape is red"]
word = ["apple", "banana","carrot","daikon","eggplant","fig","grape"]

data1 = {'text' : text}

source = ColumnDataSource(data=data1)

dt = DataTable(columns=[TableColumn(field='text', title='text')],source=source)

script1, div1 = components(dt)
return render(request, "index.html", {'script':script, 'div':div, "script1":script1,"div1":div1})
4

1 回答 1

1

这是一个基于您的代码的工作示例，它演示了所描述的行为：

from bokeh.io import show
from bokeh.layouts import row
from bokeh.models import ColumnDataSource, HoverTool, DataTable, TableColumn, CDSView, CustomJS, IndexFilter
from bokeh.plotting import figure

p_ds = ColumnDataSource(dict(fruits=["apple", "banana", "carrot", "daikon", "eggplant", "fig", "grape"],
                             count=[1, 2, 3, 4, 5, 6, 7]))

p = figure(y_range=sorted(set(p_ds.data['fruits'])), sizing_mode='scale_width',
           toolbar_location='right', tools=['tap', 'reset'])

p.hbar(y='fruits', right="count", height=0.9, selection_color='deepskyblue', nonselection_color='lightgray',
       nonselection_alpha=0.3, source=p_ds)
p.add_tools(HoverTool(tooltips=[("word", "@fruits"), ("count", "@count")]))

dt_ds = ColumnDataSource(data=dict(text=["apples r red", "banana is yelo", "carrt is loong", "daikon is long",
                                         "eggplants r", "figs are the food", "grape is red"],
                                   word=["apple", "banana", "carrot", "daikon", "eggplant", "fig", "grape"]))


dt = DataTable(columns=[TableColumn(field='text', title='text')], source=dt_ds,
               # Since none of the bars are selected at the start,
               # the filters are set to show an empty table.
               view=CDSView(source=dt_ds, filters=[IndexFilter(indices=[])]))

p_ds.selected.js_on_change('indices',
                           CustomJS(args=dict(view=dt.view, p_ds=p_ds),
                                    code="""\
                                        const {indices} = cb_obj;
                                        if (indices.length > 0) {
                                            const idx = indices[0];
                                            const word = p_ds.data.fruits[idx];
                                            const GroupFilter = Bokeh.Models('GroupFilter');
                                            view.filters = [new GroupFilter({column_name: 'word', group: word})];
                                        } else {
                                            const IndexFilter = Bokeh.Models('IndexFilter');
                                            view.filters = [new IndexFilter({indices: []})];
                                        }
                                        // Needed to work around https://github.com/bokeh/bokeh/issues/7273.
                                        view.source.change.emit();
                                    """))

show(row(p, dt))
于 2020-05-07T05:35:43.343 回答