Как получить доступ и изменить уже существующие элементы фигуры Bokeh непосредственно из JavaScript?

Question

Как получить доступ и изменить уже существующие элементы фигуры Bokeh непосредственно из JavaScript?

1

Я разрабатываю приложение, используя Bokeh и Flask. Используя серверный код python, он создает график, встроенный в веб-страницу, который содержит множество пользовательских элементов ввода, направленных на настройку графика.

Я знаю, что начиная с Bokeh v0.12.x существует API, позволяющий создавать и обрабатывать графики непосредственно из javascript.

Бит, который мне не хватает, - это, начиная с объекта JavaScript Bokeh, как я могу перечислить и получить доступ к уже созданным объектам figure (figure, line, ColumnDataSource ,...)? Используя API BokehJS, я мог бы затем написать код JavaScript, переводящий пользовательские события веб-страницы (флажок, щелчок на кнопке, ввод текста,...) в действия на сюжете (изменить цвет линии, скрыть строки, обновить значения точек данных...).

Astrum42 27 окт. 2017, в 18:30

Источник

Теги:

javascript

bokeh

plot

1 ответ

Ещё вопросы

Eugene Pakhomov · Accepted Answer · 2017-11-06T10-58-00.000Z

Рассмотрим этот очень рудиментарный пример. Надеюсь, это поможет вам начать.

Два ползунка изменяют координаты 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)

Обратите внимание, что для таких простых действий, и особенно если вы можете делать все в Bokeh, вы можете просто использовать виджеты Bokeh и связать их с другими элементами Bokeh гораздо более простым и надежным способом.
Обратите внимание, что использование bokeh для «всего» блокирует ваш пользовательский интерфейс для Bokeh гораздо больше, чем просто интерактивные графики пользовательского интерфейса. Не хорошо это или плохо, просто нужно помнить об этом.