Javascript Bokeh如何使用ajax更新数据源处理datetime

Javascript Bokeh如何使用ajax更新数据源处理datetime,javascript,python,ajax,bokeh,Javascript,Python,Ajax,Bokeh,我正在玩一个围绕Bokeh和AJAX构建的新的无服务器报告系统,我遇到了日期和时间的问题。我有一个版本,将数字数据从云函数流到通过Bokeh生成的html文件。非常类似于: 这很有效,但在等式中添加日期时间时,问题会变得复杂。(特别是在x轴上) 我的攻击计划是将从Bokeh ColumnDataSource(df.to_JSON_string()向AJAX流提供信息的JSON文件写入。这是一种更可取的方法,因为这是数据通常被馈送到涉及javascript组件的bokeh对象的方式。根据Colu

我正在玩一个围绕Bokeh和AJAX构建的新的无服务器报告系统,我遇到了日期和时间的问题。我有一个版本,将数字数据从云函数流到通过Bokeh生成的html文件。非常类似于:

这很有效,但在等式中添加日期时间时,问题会变得复杂。(特别是在x轴上)

我的攻击计划是将从Bokeh ColumnDataSource(df.to_JSON_string()向AJAX流提供信息的JSON文件写入。这是一种更可取的方法,因为这是数据通常被馈送到涉及javascript组件的bokeh对象的方式。根据ColumnDataSource的输出,似乎存在某种未知的哈希或datetime列的重新编码,Bokeh在读取该列时似乎能够识别。将ColumnDataSource(df).to_json_string()作为AJAX源进行流式处理时,此自动识别不起作用。我假设这需要在javascript方面进行一些额外的处理,但是我在网上找不到关于我应该如何处理Bokeh图来识别这些数据的例子

import pandas as pd
from bokeh.models.sources import AjaxDataSource
from bokeh.plotting import figure, ColumnDataSource

adapter = CustomJS(code="""
    //console.log(cb_data)


    const result = { 'y': cb_data.response.data["y"],'datetime': cb_data.response.data['datetime']}

    console.log(result)
    return result
""")


source=AjaxDataSource(data_url='***************',
                    polling_interval=10000*60,adapter=adapter,method='GET')

p=figure(width=1500,height=500,x_axis_type="datetime")
p.line(x='y',y='datetime,source=source,color='Orange',line_width=3)
以下是AJAX引用的JSON:

{“数据”:{“日期时间”:{“ndarray”:“aacawt20dkiaaczopbr2qgaazhy9thzcaabyht20dkiaababiupr2qgaavqi9thzcaabkst20dkiaap49thzcaabw3t20dkiaap2qgaovo9thzcaabict60dkiaaabdr2qgaahli+thzcaaaasyst60dkiaavprr2qgaaeh4+thzcaaaaj60dkiaaampr2qgaaqaqaqaqo+thzcaaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaq[30]},“索引”:{“ndarray”:AACAWT20DKIAACZOPBR2QGAAZHY9THZCAABYHT20DKIAABIUBR2QGAASM49THZCAABW3T20DKIAAPZRP2QGAOVO9THZCAABICT60DKIAAO4PRR2QGAALCY+THZCAAAA60DKIAOBDR2QGAAHLI+THZCAAAASYT60DKIAVPRR2QGAAEH4+THZCAAAAEJ60DKIAAMSBPR2QGAAQO+THZCAAAQGAATQCAABJ5DKAAB6Y64“浮形”:[30]},“y”:{“ndarray”:“aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa[30]},“id”:“14848”}”


数据在AJAX javascript中正确接收,但在图形上没有显示任何内容。正如我前面所说的,我认为必须在javascript方面进行一些额外的处理才能正确接收datetime变量,但我不知道这会是什么。plo的python或javascript方面都没有错误t只是不显示任何数据。

因此,您遇到了一个以前没有人遇到过的角落案例交互。对于独立HTML输出,Bokeh对NumPy数组或Pandas系列的CD列执行base64编码,因为它比JSON处理数组(尤其是嵌套数组)性能更高(例如,对于图像)。您可以在输出中看到这些对象带有
“ndarray”
键。通常情况下,BokehJS会自动对在
显示期间序列化的实际CD对象进行解码

但是,这种由
AjaxDataSource
消耗数据的交互有一个问题。
AjaxDataSource
不知道base64编码,也不知道如何处理那些
“ndarray”
对象。它在所有情况下都需要纯JSON数字数组

不幸的是,没有
参数to_json_string
,也没有全局设置或环境变量来抑制base64编码(根据我更好的判断,我被说服将其删除)。因此,我建议您现在最好的解决方法是对控制编码是否发生的函数进行修补:

In [12]: from bokeh.sampledata.perceptions import numberly

In [13]: from  bokeh.models import ColumnDataSource

In [14]: import bokeh.util.serialization as s

In [15]: s.array_encoding_disabled = lambda x: True # PATCH HERE FORCES ENCODE OFF 

In [16]: source = ColumnDataSource(numberly)

In [17]: source.to_json_string(include_defaults=False)
您将注意到,现在输出中没有任何显示在输出中的对象

17岁以下以下的学生::::::::::::::::::::::::::::::::::::::::::::::::,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,“很多”:10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10分数“:[0.15,0.5,0.25,0.25,0.01,0.5,4.0,0.5,0.2,4.0,0.5,0.33,0.2,0.25,0.1,1.0,0.1,1.0,0.01,0.1,15.0,0.25,3.0,0.1,0.1,0.5,0.25,0.25,0.25,0.25,0.25,0.25,0.25,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.1,3.0.0,0.0,0.4,0.0.0.0,0.0.0,0,0.1,0.0.0,0,0.0,0,0,0.1,0,0.0,0,0,0,0,0,0[250200500599400200100050030030030030040035020030030030030020030040025030020030030050020031830500120700300300400500300500],“许多”:[12,50,25,25,5,20,7,20,20,25,7,50,10,20,25,7,50,10,60,8,10,10,10,10,40,25,20,20,25,20,20,20,20,8,20,20,20,80],“分数”:[80,40500500100000400,81001001000300001000,50,40,14,6,40,50,3,40300,80100,30,40,601002000,60200,67,40,50,25100100100,40,403001000,40200,80,80500],“几个”:[7,10,4,4,5,7,3,10,8,4,8,8,7,7,4,4,7,7,4,7,7,7,7,7,7,7,6,8,4,4,4,4,4,4,4,7,5,5,7]:4,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,5,5,5,5,5,5,5,5,5,5,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3},“id”:“1001”}”


我建议您将所有这些信息归档,以便改进AjaxDataSource的这种情况。

非常有意义,非常感谢