散景选择小部件回调使用 CustomJS 过滤数据帧和绘图

Question

我想使用 CustomJS 将回调添加到我的散景选择小部件中。我需要根据选择小部件的回调过滤数据帧。由于我是JavaScript编程的新手，因此我无法编写回调的代码

true_source=ColumnDataSource(data={'a':df.loc[, 'MONTH_YR'],
'b':df.loc[, 'MCOUNT'],
'qty':df.loc[,'MPDCQTY'],
'value':df.loc[,'MQTYRATE'],
'section':df.loc['MSECTION']})
#I added the true_source so I could have a reference from my original dataframe while filtering
source=ColumnDataSource(data={'x':df.loc[df['MSECTION']=='TURRET','MONTH_YR'],
'y':df.loc[df['MSECTION']=='TURRET', 'MCOUNT'],
'qty':df.loc[df['MSECTION']=='TURRET','MPDCQTY'],
'value':df.loc[df['MSECTION']=='TURRET','MQTYRATE']})
def callback_select(attr, old, new):
s=section.value
new_data={'x':df.loc[df['MSECTION']==s, 'MONTH_YR'],
'y':df.loc[df['MSECTION']==s, 'MCOUNT'],
'qty':df.loc[df['MSECTION']==s,'MPDCQTY'],
'value':df.loc[df['MSECTION']==s,'MQTYRATE']}
source.data=new_data

由于我想部署一个 HTML 文件，因此用 python 编写回调是行不通的。 所以我尝试使用 CustomJS 编写回调。 但可以肯定的是，我写错了。

callback=CustomJS(args=dict(source=source, ts=true_source), code=""""
var data1=ts.data;
var section=data1['section']
var a=data1['a']
var b=data1['b']
var data=source.data;
var f=cb_obj.value;
var x=[];
var y=[];
var j=0;
for(var i=0;i<section.length;i++){
if(section==f){
x[j].push(a[i]);
y[j].push(b[i]);
}   
}   
source.change.emit();    
""")

这张图显示了绘图，选择选项dosent工作

任何人都可以帮我处理这个JS代码吗？

Answer 1

对于 python 中提到的 callbcak，可以在 CustomJS 中创建类似的 callbcak 以在 htmls 中实现。这里 var x， y， qty， value 是源的键，a， b， qty， value是 true_source 键。我使用它们更新了源代码。

callback=CustomJS(args=dict(source=source,ts=true_source), code="""
var data=ts.data;
var section=data['section'];
var a=data['a'];
var b=data['b'];
var qty_t=data['qty_t'];
var value_t=data['value_t'];
var data1=source.data;
var f=cb_obj.value;
var x=[];
var y=[];
var qty=[];
var value=[];
for(var i=0;i<a.length; i++){
if(section[i]==f){
x.push(a[i]);
y.push(b[i]);
qty.push(qty_t[i]);
value.push(value_t[i]);
}
}
data1['x']=x;
data1['y']=y;
data1['qty']=qty;
data1['value']=value;
source.change.emit();
""")