Javascript 保存修改后的ColumnDataSource
我正在尝试使用flask和bokeh构建一个web应用程序,用户可以在其中手动分类数据。目前,UI使用自定义javascript回调以可视化方式呈现更改,但我不确定如何使用javascript将post请求发送回我的flask应用程序以记录用户的活动Javascript 保存修改后的ColumnDataSource,javascript,python,flask,bokeh,Javascript,Python,Flask,Bokeh,我正在尝试使用flask和bokeh构建一个web应用程序,用户可以在其中手动分类数据。目前,UI使用自定义javascript回调以可视化方式呈现更改,但我不确定如何使用javascript将post请求发送回我的flask应用程序以记录用户的活动 另一个我想考虑的解决方案是将 Studio DATABORCE 转换为 .CSV 文件,用户在完成特定页面后可以下载,但我不知道在调用了API后,如何访问 CurnDasaSuthCE 。 我已经包括了一个基本的例子,说明我正在努力实现的目标 fr
另一个我想考虑的解决方案是将<代码> Studio DATABORCE 转换为<代码> .CSV 文件,用户在完成特定页面后可以下载,但我不知道在调用了API后,如何访问<代码> CurnDasaSuthCE 。 我已经包括了一个基本的例子,说明我正在努力实现的目标
from bokeh.embed import file_html
from bokeh.events import DoubleTap
from bokeh.models import CategoricalColorMapper, ColumnDataSource, CustomJS
from bokeh.plotting import figure
from bokeh.resources import CDN
from flask import Flask
import numpy as np
# color map
cmap = CategoricalColorMapper(
factors=[0, 1],
palette=['red', 'green']
)
# custom javascript callback
js_code = """
var x = cb_obj['x'];
var left = src.data['left'];
var right = src.data['right'];
var color = src.data['color'];
for (i=0; i < left.length; i++) {
if ((x > left[i]) && (x < right[i])) {
var c = color[i]
if (c < 1) {
color[i] = 1
} else {
color[i] = 0
}
}
}
src.data['color'] = color
src.trigger('change')
"""
# flask app
app = Flask(__name__)
@app.route("/")
def main():
N = 10
left = np.arange(N)
right = left + 1
color = np.random.randint(2, size=N)
src = ColumnDataSource({
'left': left,
'right': right,
'color': color
})
fig = figure(
width=500, height=200,
title='Double Click to Change Color'
)
fig.quad(
'left', 'right', 0, 1,
source=src,
fill_color={'field': 'color', 'transform': cmap},
line_color='black'
)
callback = CustomJS(code=js_code, args={'src': src})
fig.js_on_event(DoubleTap, callback)
title = 'test'
html = file_html(fig, CDN, title)
return html
if __name__ == "__main__":
app.run(debug=True)
来自bokeh.embed导入文件\u html
从bokeh.events导入双击
从bokeh.models导入CategoricalColorMapper、ColumnDataSource、CustomJS
从bokeh.plotting导入图形
从bokeh.resources导入CDN
从烧瓶进口烧瓶
将numpy作为np导入
#彩色地图
cmap=分类颜色映射器(
因子=[0,1],
调色板=[“红色”、“绿色”]
)
#自定义javascript回调
js_代码=”“”
var x=cb_obj['x'];
var left=src.data['left'];
var right=src.data['right'];
var color=src.data['color'];
对于(i=0;ileft[i])&(x
谢谢你的阅读 对于从JS发送POST请求,您可以使用 但是,在您的场景中,我将使用Bokeh服务器()-这样,您就不需要任何手动POST请求,因为您的示例中的
ColumnDataSource
将在触发更改信号后同步到Bokeh服务器(顺便说一句,“trigger”已弃用,您应该使用src.change.emit()
)
在自定义GET处理程序中,您可以使用GET\u model\u by\u name
,访问Bokeh服务器上Bokeh文档的任何模型:
@app.route('/cds-data/<cds_name>')
def get_cds_data(cds_name):
data = curdoc().get_model_by_name(cds_name).data
return some_dict_to_csv_string_function_you_have_to_write(data)
@app.route(“/cds data/”)
def get_CD_数据(CD_名称):
data=curdoc()。通过名称(cds\U名称)获取模型。数据
返回一些要写入的命令到csv字符串函数(数据)
如果您仍然不想使用Bokeh server,那么您仍然不需要任何POST请求-您可以将数据转换为字符串,然后使用类似以下示例的内容: