首页 文章

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

提问于
浏览
0

我想使用CustomJS向我的散景选择小部件添加回调 . 我需要根据select小部件的回调来过滤我的数据帧 . 既然我是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();    
                            """)

this image here shows the plot, select option dosent work

任何人都可以帮我解决这个JS代码吗?

1 回答

  • 0

    对于问题中提到的python中的callbcak,可以在CustomJS中创建类似的用于在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();
                """)
    

相关问题