javascriptから直接アクセスして既存のBokeh Figure要素を直接変更する方法は？

私はBokehとFlaskを使ってアプリケーションを開発しています。サーバーサイドのPythonコードを使用して、プロットの作成を目的としたさまざまなユーザー入力要素を含むWebページに埋め込まれたプロットを作成します。javascriptから直接アクセスして既存のBokeh Figure要素を直接変更する方法は？

私はBokeh v0.12.xから、javascriptから直接プロットを作成して操作できるAPIがあることを知っています。 Bokeh javascriptオブジェクトから始まる

私がここで行方不明ですビットは、は、どのように私がリストアップし、既にインスタンスの図形オブジェクト（figure、line、ColumnDataSource、...）にアクセスすることができますか？私は、BokehJS APIを使用して、Webページのユーザイベント（チェックボックス、ボタンクリック、テキスト入力など）をプロット上のアクションに変換するJavaScriptコードを書くことができます（行の色の変更、行の非表示、 ...）。

出典

2017-10-27 Astrum42

この非常に初歩的な例を考えてみましょう。私はそれがあなたを始めることができることを望む。

2つのスライダが中ドットの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)

出典

2017-11-06 13:29:30

あなたがボケですべてを行うことができ、そのような単純な活動のために、特に場合は、あなただけのボケのウィジェットを使用するとはるかにシンプルかつ堅牢な方法で他のボケの要素とそれらをリンクすることもできます。 –

javascriptから直接アクセスして既存のBokeh Figure要素を直接変更する方法は？

答えて

関連する問題