用回調改變散景中的情節源

Question

想象一下，我有2個（或更多）具有相同列數和行數的數據源：

#Data
dates = [date(2016, i, 1) for i in range(1,13)]

data1 = pd.DataFrame(index = dates, data = random.randn(12, 2),
                     columns = ['A', 'B'])

data2 = pd.DataFrame(index = dates, data = random.randn(12, 2),
                     columns = ['A', 'B'])

我想在散景中繪制A和B列：

#Bokeh
source = ColumnDataSource(source1)
source1 = ColumnDataSource(data1)
source2 = ColumnDataSource(data2)

p = figure(x_axis_type = 'datetime')
l1 = p.line(source = source, x = dates, y= 'A', color = 'Red')
l2 = p.line(source = source, x = dates, y= 'B', color = 'Blue')

我有一個下拉列表：

select = Select(options = ['source1', 'source2'], value = 'source1')

為select創建回調的最簡單方法是什么，以便在下划線列表中選擇不同的選項時，折線圖中的數據源會發生變化？ 我幾乎沒有JS的經驗，也無法真正繞過回調，所以任何幫助都會受到贊賞。

編輯：

我試過這個：

codes = """
var f = cb_obj.get('value');
var sdata = source.data;
var 1data = source1.data;
var 2data = source2.data;

if (f == "source1") {
sdata = 1data ;
source.trigger('change');
};

if (f == "source2") {
sdata = 2data ;
source.trigger('change');
};


"""

select.callback= CustomJS(args= dict(source = source, source1=source1,
                          source2=source2), code = codes)

但它不起作用......

Answer 1

編輯： obj.trigger('change',arg)已更改為散景0.12.6，現已棄用，新語法為obj.change.emit(arg) ，請參閱散景版本

您可以清空“源”數據列並使用.push（）在for循環中重新填充它們

此外，您不應使用以數字開頭的變量名稱

codes = """
var f = cb_obj.get('value');
var sdata = source.data;
var data1 = source1.data;
var data2 = source2.data;

if (f == "source1") {
sdata["A"] = [] ;
for (i=0;i<data1["A"].length; i++) {
sdata["A"].push(data1["A"][i]);
}
sdata["B"] = [] ;
for (i=0;i<data1["B"].length; i++) {
sdata["B"].push(data1["B"][i]);
}
source.trigger('change');
};

if (f == "source2") {
sdata["A"] = [] ;
for (i=0;i<data2["A"].length; i++) {
sdata["A"].push(data2["A"][i]);
}
sdata["B"] = [] ;
for (i=0;i<data2["B"].length; i++) {
sdata["B"].push(data2["B"][i]);
}
source.trigger('change');
};
"""

編輯回答評論

from bokeh.plotting import figure, output_file
from bokeh.models import CustomJS, ColumnDataSource, Select
from bokeh.layouts import gridplot
from bokeh.resources import CDN
from bokeh.embed import file_html

from random import random

key_list = list('ABCDEFGHIJKLMNOP')

DATA1 = {key:[random() for i in range(10)] for key in key_list}
DATA2 = {key:[random() for i in range(10)] for key in key_list}
DATA1['xaxis'] = range(10)
DATA2['xaxis'] = range(10)

source1 = ColumnDataSource(data=DATA1)
source2 = ColumnDataSource(data=DATA2)

fill_source = ColumnDataSource(data=DATA1)

fig = figure()

for key in key_list:
    fig.line(x='xaxis',y=key,source=fill_source)

select = Select(options=['source1','source2'],value='source1')

codes = """
var f = cb_obj.value;
var sdata = source.data;
var data1 = source1.data;
var data2 = source2.data;

console.log(data2);

for (key in data1) {console.log(key);}

if (f == "source1") {
for (key in data1) {
    sdata[key] = [];
    for (i=0;i<data1[key].length;i++){
    sdata[key].push(data1[key][i]);
    }
}
} else {
for (key in data2) {
    sdata[key] = [];
    for (i=0;i<data2[key].length;i++){
    sdata[key].push(data2[key][i]);
    }
}
};

source.trigger("change");
"""
select.callback = CustomJS(args=dict(source=fill_source,source1=source1,source2=source2),code=codes)

grid = gridplot([[select],[fig]])

outfile=open('select.html','w')
outfile.write(file_html(grid,CDN,'select'))
outfile.close()

console.log（）行不是必需的，但您可以使用它來幫助自己理解/調試回調，這些是瀏覽器控制台中的print語句（右鍵單擊 - > inspect - > Console）