Chức năng python gọi lại hiệu ứng bokeh

Tôi đã thêm một thanh trượt giả, không nhìn thấy được, để sử dụng lệnh gọi lại được đính kèm với thanh trượt này. Khi bạn thay đổi giá trị thanh trượt, lệnh gọi lại được kích hoạt bên trong bởi bảng điều khiển. Điều này tốt vì js_callback luôn có đối tượng cb_obj trong mã javascript, bạn có thể sử dụng đối tượng này để chuyển nhiệt độ được tạo ngẫu nhiên. chức năng ngẫu nhiên. Tôi nghĩ bạn cũng không cần xác định nhiệt độ toàn cầu trong trường hợp đó

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} 
{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"]

Xin chào @otluk

Cách giải quyết hoặc mã hacky cho máy đo có một số chi tiết cần được xem xét. Giải pháp đơn giản để truyền dữ liệu từ khung dữ liệu gấu trúc là xem các giải pháp khác, chẳng hạn như giải pháp được hiển thị tại đây

Một câu hỏi ở đây về diễn ngôn đã khiến tôi bắt đầu Truyền phát. Đây là một ví dụ đơn giản nhưng rất mạnh mẽ. Đây là một thực hiện nhanh chóng và bẩn. Chưa biết làm thế nào để làm điều này một cách tốt nhất. Muốn chia sẻ vì tôi chưa thấy nhiều ví dụ về phát trực tuyến với Bảng điều khiển. Tôi không hiểu từng chi tiết. Nếu bạn muốn hiểu nó, hãy xem hướng dẫn tham khảo https. // bảng điều khiển. holoviz. org/reference/panes/Streamz. html#panes-gallery-streamz. Ví dụ này được lấy cảm hứng rất nhiều từ điều đó. sọc…

Như đã nói, chúng ta có thể xem cách áp dụng cách giải quyết tương tự để gửi dữ liệu cho biểu đồ đường. Chúng ta có thể coi bảng điều khiển giống như một khung công tác toàn ngăn xếp, kết nối phần phụ trợ [trăn] với phần đầu [trình duyệt]. Cách bảng điều khiển thực hiện điều đó giống như phép thuật, gửi dữ liệu qua lại [tuần tự hóa để xử lý dữ liệu bạn muốn truyền đạt]. Trong ví dụ trước, bạn chỉ muốn gửi loại dữ liệu là một con số, thì chúng ta sử dụng một thanh trượt, trong đó có một thanh trượt thuộc tính. giá trị, loại số. Trong trường hợp này, nếu bạn muốn gửi dữ liệu bao gồm dấu thời gian và giá trị, thì phải sử dụng một tiện ích con khác có thể hỗ trợ loại dữ liệu đó. pn. vật dụng. literal_input có thể thực hiện công việc đó [LiteralInput — Panel v0. 13. 1]. Đáng chú ý là sự khác biệt giữa thanh trượt được sử dụng trước đó và chữ_input, cái trước chỉ chấp nhận số, trong khi cái sau có thể chấp nhận số, danh sách hoặc ký tự

Bạn có thể tìm thấy bên dưới mã. Việc chuyển đổi dữ liệu trong lệnh gọi lại javascript khiến tôi mất một lúc và đó là điều mà bảng điều khiển đã thực hiện trong mã của nó, vì vậy đây giống như việc phát minh lại bánh xe. Do đó, tốt hơn là sử dụng ví dụ đầu tiên được đưa ra trong liên kết

import time
import panel as pn, pandas as pd 
import random, numpy as np

from datetime import datetime

pn.config.sizing_mode = 'stretch_width'
random.seed[]


def retrieve[]:
    n = 5
    # letters =  [chr[i] for i in np.random.randint[ord['a'], ord['z'] + 1, n]]
    letters = pd.date_range[start="2018-09-09",end="2020-02-02", periods = 5].to_pydatetime[].tolist[] 
    values = np.random.randint[0, 100, n]  
    return [letters, values]


literal_input = pn.widgets.LiteralInput[name='Literal Input [dict]', 
        value={'key': [1, 2, 3]}, type=dict, visible=False]

# Stream function
def stream[]:
    letters, values = retrieve[]
    literal_dict = {str[l]:v for l, v in zip[letters, values]}
    print['in python', literal_dict]
    # how to access the js object?
    literal_input.value = literal_dict # this step triggers internally the js_callback attached to the slider 


# Set up callback with streaming data
cb = pn.state.add_periodic_callback[stream, 2000]

# 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[theme="dark", height=400]
gauge_pane.object = {
        "xAxis": {
            "type": 'time',
            "data": []
        },
        "yAxis": {
            "type": 'value'
        },
        "series": [{
            "data": [],
            "type": 'line',
            "showSymbol": False,
            "hoverAnimation": False,
        },
        ],
        "responsive": True
    }

row = pn.Column[gauge_pane,literal_input].servable[]

literal_input.jscallback[args={'gauge': gauge_pane,}, value="""
    console.log[cb_obj.value]
    let literal_dict = JSON.parse[ cb_obj.value.replaceAll["'",'\"'] ]
    // console.log[literal_dict]
    
    let keys = Object.keys[literal_dict];
    let values = Object.entries[literal_dict];

    console.log[typeof[literal_dict],literal_dict, 'dummy slider:', keys, values ,
            'gauge value',gauge.data.xAxis.data, 
           gauge.data.series[0].data ];

    gauge.data.xAxis.data = keys;
    gauge.data.series[0].data = values;

    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"]

Đây là mã với một vài sửa đổi, nếu bạn muốn tích lũy dữ liệu trong biểu đồ đường. Dữ liệu được gửi đến giao diện người dùng và được lưu trong sơ đồ biểu đồ, nhưng nó không được lưu trong máy chủ