gpt4 book ai didi

javascript - 如何直接从 javascript 访问和修改现有的 Bokeh 图元素?

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:58:48 24 4
gpt4 key购买 nike

我正在使用 Bokeh 和 Flask 开发应用程序。使用服务器端 python 代码,它会生成一个嵌入网页的绘图,其中包含旨在配置绘图的各种用户输入元素。

我知道从 Bokeh v0.12.x 开始,有一个 API 允许直接从 javascript 创建和操作绘图。

我在这里缺少的一点是,Bokeh javascript 对象开始,我如何列出和访问已经实例化的图形对象(figureline, ColumnDataSource, ...)? 使用 BokehJS API,我将能够编写 javascript 代码来翻译网页用户事件(复选框、按钮点击、文本输入,...)到图上的操作(更改线条颜色,隐藏线条,更新数据点值,...)。

最佳答案

考虑这个非常基本的例子。我希望它可以帮助您入门。

两个 slider 改变中间点的 xy 坐标。

from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import file_html
from bokeh.models import ColumnDataSource
from jinja2 import Template

source = ColumnDataSource(data=dict(x=[1, 2, 3],
y=[3, 2, 1]),
name='my-data-source')

p = figure()
l1 = p.line("x", "y", source=source)

# copied and modified default file.html template used for e.g. `file_html`
html_template = Template("""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ title|e if title else "Bokeh Plot" }}</title>
{{ bokeh_css }}
{{ bokeh_js }}
<style>
html {
width: 100%;
height: 100%;
}
body {
width: 90%;
height: 100%;
margin: auto;
}
</style>
<script>
function change_ds_value(name, idx, value) {
var ds = Bokeh.documents[0].get_model_by_name('my-data-source');
ds.data[name][idx] = value;
ds.change.emit();
}
</script>
</head>
<body>
<div>
{{ plot_div|indent(8) }}
{{ plot_script|indent(8) }}
<input type='range' min='-5' max='5'
onchange='change_ds_value("x", 1, this.value)'/>
<input type='range' min='-5' max='5'
onchange='change_ds_value("y", 1, this.value)'/>
</div>
</body>
</html>
""")

html = file_html(p, CDN, template=html_template)
with open('test.html', 'wt') as f:
f.write(html)

关于javascript - 如何直接从 javascript 访问和修改现有的 Bokeh 图元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46979431/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com