面板- JSCallback函数-将流数据链接到面板仪表板中的电子图表中的JSObject
面板- JSCallback函数-将流数据链接到面板仪表板中的电子图表中的JSObject
提问于 2022-06-26 14:15:25
其目标是将数据流到面板中，并在一个量规中显示当前的温度。面板EChart量规
因此，我使用面板的回调函数来检索一个新的温度值，并希望用JSCallback函数来更新表。
我还研究了关于堆栈溢出的以下问题：
以下是当前代码：
import time
import panel as pn
import random
random.seed()
def read_temp():
return random.randint(15, 30)
global temperature
temperature = read_temp()
# Stream function
def stream():
temperature = read_temp()
print(temperature)
#how to access the js object?
pn.state.jscallback(args={'gauge': gauge_pane}, value="""
gauge.data.series[0].data[0].value = """+str(temperature))
gauge = {
'tooltip': {
'formatter': '{a} <br/>{b} : {c}°C'
},
'series': [
{
'name': 'Gauge',
'type': 'gauge',
'detail': {'formatter': '{value}°C'},
'data': [{'value': [temperature], 'name': 'Temperature'}]
}
]
};
#Panel
pn.extension('echarts',sizing_mode="stretch_width",template="fast")
ACCENT = "orange"
pn.state.template.param.update(site="Test", title="Introduction to data apps with Panel",
sidebar_width=200, accent_base_color=ACCENT,
header_background=ACCENT, font="Montserrat")
gauge_pane = pn.pane.ECharts(gauge,width=400, height=400).servable()
pn.pane.JPG("logo.jpg", sizing_mode="scale_width", embed=False).servable(area="sidebar")
pn.panel("# Settings").servable(area="sidebar")
# Set up callback with streaming data
pn.state.add_periodic_callback(stream, 500)可能是来自面板开发人员/社区的人有一些提示或一些示例。我主要想了解如何访问要在面板中更新的JS对象。所以也许JSLink是正确的方法吗？如果是的话，我的小例子会怎么样？-谢谢！:-)
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-06-27 00:57:08
我想，从python调用jscallback没有一种简单的方法，但我不确定。CustomJS中的Bokeh回调:是否有一种方法可以从另一个具有自定义JS的回调内部触发CustomJS回调？
我认为你的问题是相关的，没有pn.state.jscallback (或者我不知道)。
我添加了一个不可见的虚拟滑块，以使用附加到此滑块的回调。当您更改滑块值时，面板会在内部触发回调。这很好，因为js_callback在javascript代码中总是有一个cb_obj对象，您可以使用它传递random.randint函数生成的温度。我认为，在这种情况下，你也不需要定义全球温度。
解决方案工作的一个gif在这里，https://discourse.holoviz.org/uploads/default/original/2X/f/f65a8da7b3224b1a6a86b57e4ddd20dc0aa11bb1.gif。
import time
import panel as pn
import random
random.seed()
def read_temp():
return random.randint(15, 30)
global temperature
temperature = read_temp()
slider = pn.widgets.FloatSlider(visible=False)
# Stream function
def stream():
temperature = read_temp()
print('in python', temperature)
#how to access the js object?
slider.value = random.randint(0, 30) # this step triggers internally the js_callback attached to the slider
gauge = {
'tooltip': {
'formatter': '{a} <br/>{b} : {c}°C'
},
'series': [
{
'name': 'Gauge',
'type': 'gauge',
'detail': {'formatter': '{value}°C'},
'data': [{'value': [temperature], 'name': 'Temperature'}]
}
]
};
# Set up callback with streaming data
pn.state.add_periodic_callback(stream, 500)
#Panel
pn.extension('echarts',sizing_mode="stretch_width",template="fast")
ACCENT = "orange"
pn.state.template.param.update(site="Test", title="Introduction to data apps with Panel",
sidebar_width=200, accent_base_color=ACCENT,
header_background=ACCENT, font="Montserrat")
gauge_pane = pn.pane.ECharts(gauge,width=400, height=400)
row = pn.Row(gauge_pane,slider).servable()
slider.jscallback(args={'gauge': gauge_pane}, value="""
console.log( 'dummy slider:', cb_obj.value,
'gauge value',gauge.data.series[0].data[0].value);
gauge.data.series[0].data[0].value = cb_obj.value;
gauge.properties.data.change.emit()"""
)
# pn.pane.JPG("logo.jpg", sizing_mode="scale_width", embed=False).servable(area="sidebar")
pn.panel("# Settings").servable(area="sidebar")页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72762347
复制相关文章
相似问题
腾讯云开发者
