`CustomJS`를 사용하여 파이썬에서 bokeh로 임의의`json` 데이터를 전달하는 방법

Question

bokeh 시각화 작업 중 하나는 클라이언트 측에서 대화 형 기능을 구현하기 위해 CustomJS을 사용하여 서버없이 실행된다는 것입니다. 자바 스크립트를 사용하여. ColumnDataSource을 CustomJS으로 전달하면 대화 형으로 플롯을 업데이트하는 데 문제가 없습니다.

그러나 내가 할 수없는 것은 출력 HTML에 임의의 json 데이터를 포함시키는 것입니다.

내 경우

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 값의 콘텐츠가 필요합니다.

그러나 나는 일반 json 데이터에 대한 유사한 아무것도 찾을 수없는, 단순한 열 데이터의 경우, 나는 ColumnDataSource 내 데이터를 포장 할 수 있으며 CustomJS에 대한 인수로 그 전달합니다. 위의 코드는 메시지와 함께 실패합니다

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)