散景:使用2个交互式小部件通过CustomJS过滤数据集

时间:2019-05-13 19:57:48

标签: javascript python bokeh

我想基于2个“选择”小部件(其中source['level'] == levelsource['country'] == country)中的值过滤数据。

使用CustomJS,我可以使用level使cb_obj过滤器正常工作。

但是cb_obj仅引用触发它的窗口小部件。如何获取回调函数中另一个select小部件的值?

我还需要坚持使用CustomJS,谢谢!

示例代码:

# Level
level = Select(title="Level:", value='All Levels', options=['All Levels', '1', '2', '3'], callback=callback)

# Country
country = Select(title="Country:", value='All Countries', options=['All Countries', 'US', 'UK', 'CAN'], callback=callback)

callback = CustomJS(args=dict(source=source, ts=true_source), code="""
    var df = source.data;
    var data = ts.data;
    var data_level = data['Level'];

    var l=cb_obj.value;

    var data_x = data['x'];
    var data_y = data['y'];

    var x=[];
    var y=[];

    for (var i=0;i<data_level.length; i++){

        // Here: I want to add (Level) and (Country) filters
        // But I'm not sure how to reference Country widget value
        if(l=='All Levels' || data_level[i]==l){
            x.push(data_x[i]);
            y.push(data_y[i]);}}

    df['x'] = [];
    df['y'] = [];

    df['x'] = x;
    df['y'] = y;

    source.change.emit();
"""

1 个答案:

答案 0 :(得分:0)

您可以像这样将两个ngOnInit(){ this.getCustomerInfo1(); let observable = this.getTotalDevice(); observable.subscribe(customerInfoResult => { Highcharts.chart('container', this.options); }) this.configuration = DefaultConfig; this.configuration.orderEnabled = false; console.log("onInit data",this.data1); } //CODE FOR CALLING API getTotalDevice(){ return this._dataService.getCustomerInfo().pipe(tap((result2) =>{ this.users2=result2 console.log("result array" + JSON.stringify(this.users2)); console.log("connected total" +this.Connect_Total); this.ConnectMethod(this.Connect_Total); }, (error)=>{ })); } //CODE FOR HIGHCHARTS public options: any = { chart: { type: 'pie', options3d: { enabled: true, alpha: 45 } }, title: { text: 'Connected vs disconnected' }, subtitle: { text: '3D donut in Highcharts' }, plotOptions: { pie: { innerSize: 100, depth: 45 } }, series: [{ name: 'Delivered amount', data: [ ['Connected', this.Connect_Total], ['DISCONNECTED', 3000], ] }] } } 小部件明确传递给回调:

Select

然后使用callback = CustomJS(args=dict(source = source, ts = true_source, level = level, country = country), code=code) cb_obj.value

而不是level.value来获得值。