`CustomJS`を使ってPythonからbokehに任意の` json`データを渡す方法

Question

私はbokehのビジュアライゼーションに取り組んでいます。クライアント側で対話性を実装するのにCustomJSを使用しているので、 JavaScriptを使用して。 ColumnDataSourceをCustomJSに渡すと、プロットをインタラクティブに更新できます。

しかし、私は何もできません、いくつかの任意のjsonデータを出力htmlに埋め込むだけです。以下の自己完結型の例を参照してください：私の場合は

from bokeh.io import output_file 
from bokeh.layouts import widgetbox 
from bokeh.models import CustomJS 
from bokeh.models.widgets import Div, Button 
from bokeh.plotting import show 

data_for_client = { 
    "x": 3, 
    "y": { 
     "foo": [1, 2, 3], 
     "bar": {"some_bar": "doge", "other bar": "much json"} 
    }, 
    "z": [[1, 2], [3, 4]] 
} 

callback = CustomJS(args={"data_for_client": data_for_client}, code=""" 
    console.log(data_for_client); 
""") 

content = widgetbox(
    Button(label="click here", callback=callback), 
    Div(text="some complicated interactive stuff based on json content here") 
) 

output_file("issue.html") 
show(content) 

をdata_for_clientがjson複雑深くネストされ、このjsonの異なる部分がいくつかのウィジェットとのユーザインタラクションに応じて使用されています。

ユーザーの操作に基づいてjsonデータに変更を加える必要はありません。また、リスナーや特別なものを添付する必要はありません。 CustomJSコールバックで使用できるjson値の内容が必要です。

単純な列データの場合は、ColumnDataSourceにデータをラップし、CustomJSにargとして渡すことができますが、普通のjsonデータと似たものは見つかりません。上記のコードは、メッセージで失敗します。

ValueError: expected an element of Dict(String, Instance(Model)), got {'data_for_client': {'x': 3, 'y': {'foo': [1, 2, 3], 'bar': {'some_bar': 'doge', 'other bar': 'much json'}}, 'z': [[1, 2], [3, 4]]}} 

Answer 1

そうでなければ、辞書のキーとして辞書（{...}を）使用することはできませんので、あなたは、関連するラインに"data_for_client"に最初data_for_clientを変更する必要があります。

from bokeh.io import output_file 
from bokeh.layouts import widgetbox 
from bokeh.models import CustomJS 
from bokeh.models.widgets import Div, Button 
from bokeh.plotting import show 

data_for_client = { 
    "x": 3, 
    "y": { 
     "foo": [1, 2, 3], 
     "bar": {"some_bar": "doge", "other bar": "much json"} 
    }, 
    "z": [[1, 2], [3, 4]] 
} 

# Here is the change: 
callback = CustomJS(args={"data_for_client": data_for_client}, code=""" 
    console.log(data_for_client); 
""") 

content = widgetbox(
    Button(label="click here", callback=callback), 
    Div(text="some complicated interactive stuff based on json content here") 
) 

output_file("issue.html") 
show(content) 

Answer 2

あなたは文字列として渡すことができます、私はそこにjson文字列からjsonデータを読み込むためのjavascriptがあると思います。これはPythonに少なくとも存在します。

from bokeh.io import show 
from bokeh.layouts import widgetbox 
from bokeh.models import CustomJS, ColumnDataSource 
from bokeh.models.widgets import Div, Button 
import json 

data_for_client = { 
    "x": [3], 
    "y": { 
      "foo": [1, 2, 3], 
      "bar": {"some_bar": "doge", "other bar": "much json"} 
     }, 
    "z": [[1, 2], [3, 4]], 
} 

json_string = json.dumps(data_for_client) 

DumButton = Button(label=json_string) 

# Here is the change: 
callback = CustomJS(args={"db":DumButton}, code=""" 
    console.log(db.label); 
    var test=JSON.parse(db.label); 
    console.log(test); 
    for(key in test){console.log(test[key])} 
    """) 

content = widgetbox(
    Button(label="click here", callback=callback), 
) 

show(content)