Question

我想做这样的事情。我创建了一些小部件，例如下拉列表，多选框和文本输入框。然后我添加一个按钮。当用户在小部件中选择变量并单击按钮时。他们选择的值将作为txt文件下载。我希望此html在没有bokeh服务器的情况下可以使用，因此，如果有人可以通过customJS完成此操作，我将不胜感激。

真的很感激。

from random import random
from bokeh.plotting import figure, output_file, show, ColumnDataSource
from bokeh.models import CustomJS, Button
from bokeh.layouts import row, column

savebutton = Button(label="Save", button_type="success")
savebutton.callback = CustomJS(args=dict(multi_select1.value,multi_select2.value), code="""
        var value1 = multi_select1.value;
        var value2 = multi_select1.value;

        var out = "";
        for (i = 0; i < value1.length; i++) {
            out += value1[i];
        }
        for (i = 0; i < value2.length; i++) {
            out += value2[i];
        }
        var file = new Blob([out], {type: 'text/plain'});
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(file);
        elem.download = 'selected-data.txt';
        document.body.appendChild(elem);
        elem.click();
        document.body.removeChild(elem);
        """)

assets=['asset1','asset2','asset3','asset4']
multi_select1 = MultiSelect(title="Select:", value=['asset1'],options=assets, height=200, width=100)
multi_select2 = MultiSelect(title="Select:", value=['asset1'],options=assets, height=200, width=100)

plot = column(multi_select1,multi_select2,savebutton)
show(plot)

Answer 1

好吧，好像我自己弄清楚了。希望对其他人有帮助。

from bokeh.plotting import figure, output_file, show, ColumnDataSource
from bokeh.models import CustomJS, Button
from bokeh.layouts import row, column

x = ['asset1']
source= ColumnDataSource(data=dict(x=x))

callback = CustomJS(args=dict(source=source), code="""
    var data = source.data;
    var input = cb_obj.value;
    data['x']=input;
    source.change.emit();
""")

assets=['asset1','asset2','asset3','asset4']
multi_select1 = MultiSelect(title="Select:", value=['asset1'],options=assets, height=200, width=100)
multi_select1.js_on_change('value', callback)


savebutton = Button(label="Save", button_type="success")
savebutton.callback = CustomJS(args=dict(source=source), code="""
        var data = source.data;
        value1=data['x'];
        var out = "";
        for (i = 0; i < value1.length; i++) {
            out += value1[i];
        }
        var file = new Blob([out], {type: 'text/plain'});
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(file);
        elem.download = 'selected-data.txt';
        document.body.appendChild(elem);
        elem.click();
        document.body.removeChild(elem);
        """)


plot = column(multi_select1,savebutton)
show(plot)

Answer 2

我更新了上面的版本，但是无法正常工作（未创建txt文件...）

有人知道我在做什么错吗？

from bokeh.plotting import figure, output_file, show, ColumnDataSource
from bokeh.models import CustomJS, Button, MultiSelect
from bokeh.layouts import row, column
from bokeh.models.callbacks import CustomJS

x = ['asset1']
source= ColumnDataSource(data=dict(x=x))

callback1 = CustomJS(args=dict(source=source), code="""
    var data = source.data;
    var input = cb_obj.value;
    data['x']=input;
    source.change.emit();
    """)

assets=['asset1','asset2','asset3','asset4']
multi_select1 = MultiSelect(title="Select:", value=['asset1'],options=assets, height=200, width=100)
multi_select1.js_on_change('value', callback1)


savebutton = Button(label="Save", button_type="success")


callback2 = CustomJS(args=dict(source=source), code="""
        var data = source.data;
        value1=data['x'];
        var out = "";
        for (i = 0; i < value1.length; i++) {
            out += value1[i];
            }
        var file = new Blob([out], {type: 'text/plain'});
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(file);
        elem.download = 'selected-data.txt';
        document.body.appendChild(elem);
        elem.click();
        document.body.removeChild(elem);
        """)

savebutton.js_on_click(callback2)

plot = column(multi_select1,savebutton)
show(plot)

很抱歉将其添加到旧帖子中

散景单击按钮，使用javascript将小部件值保存到txt文件

2 个答案: