散景中的CheckboxGroup以绘制叠加图 [英] CheckboxGroup in Bokeh to plot additive plots

问题描述

我想使用一个复选框组来表示线性加法源.这个想法是为了使用户能够打开或关闭多个不同种类的源，以显示带有附加值的图.

I want to use a checkbox group to represent linearly additive sources. The idea is for the user to be able to turn on or turn off multiple sources of different kinds to display a plot with added values.

我实现了一个下拉版本，其中数据具有不同的组合作为数据框的列，因此代码的CustomJS部分如下:

I implemented a dropdown version where the data had the different combinations as columns of the dataframe so the CustomJS part of the code was as follows:

 callback = CustomJS(args={'source':source},code="""
        // print the selectd value of the select widget - 
        // this is printed in the browser console.
        // cb_obj is the callback object, in this case the select 
        // widget. cb_obj.value is the selected value.
        console.log(' changed selected option', cb_obj.value);

        // create a new variable for the data of the column data source
        // this is linked to the plot
        var data = source.data;

        // allocate the selected column to the field for the y values
        data['A1'] = data[cb_obj.value];

        // register the change - this is required to process the change in 
        // the y values
        source.change.emit();
""")

我不太了解Javascript.有没有一种方法可以仅给出一个数据帧，如下所示:

I don't know Javascript well enough. Is there a way to just give a dataframe as follows:

Wave    A    B   C
340    77   70  15
341    80   73  15
342    83   76  16
343    86   78  17

并具有复选框组按钮，如果用户选择"A"和"C"，则图将更改为Wave vs. A + C的图，反之亦然，以删除选择.

And have checkbox group buttons where if the user selects 'A' and 'C' the plot changes to a plot of Wave vs. A+C and vice versa for removing the selection.

我发现了一个类似的问题，但是它只是显示/隐藏图表，并且不会更改数据: https://stackoverflow .com/a/38706613/8565759

I found a similar question, but it just shows/hides the plots and doesn't change the data: https://stackoverflow.com/a/38706613/8565759

我在真实数据中有太多选择，无法手动分配组合.

I have way too many selections in the real data to manually assign combinations.

推荐答案

是的，您可以使用CheckboxGroup实现此目的-您可以使用CheckboxGroup的active属性来选择要添加到组合图中的正确列. 这是您提供的数据的完整示例:

Yes, you can achieve this with the CheckboxGroup - you can use the active attribute of CheckboxGroup to select the correct columns to add to the combined plot. Here is a complete example with the data you provided:

from bokeh.io import output_file, show
from bokeh.plotting import figure
from bokeh.layouts import layout, widgetbox
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import CheckboxGroup
import pandas as pd

output_file('additive_checkbox.html')
names = ['Wave', 'A', 'B', 'C']
rows = [(340, 77, 70, 15),
        (341, 80, 73, 15),
        (342, 83, 76, 16),
        (343, 86, 78, 17)]
data = pd.DataFrame(rows, columns=names)
data['combined'] = None
source = ColumnDataSource(data)
callback = CustomJS(args=dict(source=source), code="""
    const labels = cb_obj.labels;
    const active = cb_obj.active;
    const data = source.data;
    const sourceLen = data.combined.length;
    const combined = Array(sourceLen).fill(undefined);
    if (active.length > 0) {
        const selectedColumns = labels.filter((val, ind) => active.includes(ind));
        for(let i = 0; i < sourceLen; i++) {
            let sum = 0;
            for(col of selectedColumns){
                sum += data[col][i];
            }
            combined[i] = sum;
        }
    }
    data.combined=combined;
    source.change.emit();
""")
checkbox_group = CheckboxGroup(labels=names[1:], active=[], callback=callback)
p = figure(width=400, height=400)
p.line(x='Wave', y='combined', source=source)
show(layout([[widgetbox(checkbox_group)], [p]]))

这篇关于散景中的CheckboxGroup以绘制叠加图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！