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

Question

I am developing an application using Bokeh and Flask. 我正在使用Bokeh和Flask开发一个应用程序。 Using server-side python code, it produces a plot embedded in a web page which contains a variety of user input elements aiming at configuring the plot. 使用服务器端python代码，它生成一个嵌入在网页中的绘图，其中包含旨在配置绘图的各种用户输入元素。

I know that starting from Bokeh v0.12.x, there is an API allowing to create and manipulate plots directly from javascript. 我知道从Bokeh v0.12.x开始，有一个API允许直接从javascript创建和操作绘图。

The bit I am missing here is, starting from the Bokeh javascript object, how can I list and access the already instantiated figure objects ( figure , line , ColumnDataSource , ...)? 我在这里缺少的是， 从Bokeh javascript对象开始，我如何列出和访问已经实例化的图形对象（ figure ， line ， ColumnDataSource ，...）？ Using the BokehJS API, I would then be able to write javascript code translating webpage user events (checkbox, button click, text input, ...) into actions on the plot (change line color, hide lines, update data point values, ...). 使用BokehJS API，我就可以编写javascript代码，将网页用户事件（复选框，按钮点击，文本输入......）转换为绘图上的动作（更改线条颜色，隐藏线条，更新数据点值，。 ..）。

Answer 1

Consider this very rudimentary example. 考虑这个非常基本的例子。 I hope it can get you started. 我希望它能让你开始。

Two sliders change x and y coordinates of the middle dot. 两个滑块改变中间点的x和y坐标。

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访问和修改现有的Bokeh图元素？

问题描述

1 个解决方案

解决方案1
5 已采纳 2017-11-06 13:29:30

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

问题描述

1 个解决方案

解决方案1 5 已采纳 2017-11-06 13:29:30

解决方案1
5 已采纳 2017-11-06 13:29:30