散景如何使用ajax更新数据源处理日期时间



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

https://github.com/bokeh/bokeh/blob/1.2.0/examples/howto/ajax_source.py

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

我的攻击计划是编写从Bokeh ColumnDataSource(df).to_json_string()馈送AJAX流的JSON文件。这是更可取的方法,因为这是将数据通常馈送到涉及javascript组件的散景对象的方式。根据ColumnDataSource的输出,似乎存在某种未知的日期时间列的哈希或重新编码,Bokeh在读取时似乎可以识别它。当将列数据源(df).to_json_string()流式传输为AJAX源时,此自动识别不起作用。我假设这需要在javascript方面进行一些额外的处理,但我在网上找不到关于我应该为散景图做什么来识别这些数据的例子。

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":"AACAWT20dkIAACZoPbR2QgAAzHY9tHZCAAByhT20dkIAABiUPbR2QgAAvqI9tHZCAABksT20dkIAAArAPbR2QgAAsM49tHZCAABW3T20dkIAAPzrPbR2QgAAovo9tHZCAABICT60dkIAAO4XPrR2QgAAlCY+tHZCAAA6NT 60dkIAAOBDPrR2QgAAhlI+tHZCAAAsYT60dkIAANJvPrR2QgAAeH4+tHZCAAAejT60dkIAAMSbPrR2QgAAaqo+

tHZCAAAQuT60dkIAALbHPrR2QgAAXNY+tHZCAAAC5T60dkIAAKjzPrR2QgAATgI/tHZC","dtype":"float64","shape": [30]},"索引":{">ndarray":"AACAWT20dkIAACZoPbR2QgAAzHY9tHZCAAByhT20dkIAABiUPbR2QgAAvqI9tHZCAABksT20dkIAAArAPbR2QgAAsM49tHZCAABW3T20dkIAAPzrPbR2QgAAovo9tHZCAABICT60dkIAAO4XPrR2QgAAlCY+tHZCAAA6NT60dk IAAOBDPrR2QgAAhlI+tHZCAAAsYT60dkIAANJvPrR2QgAAeH4+tHZCAAAejT60dkIAAMSbPrR2QgAAaqo+tHZCAAAQuT60dkIAALbHPrR2QgAAXNY+tHZCAAAC5T60dkIAAKjzPrR2QgAATgI/tHZC","dtype":"float64","shape":[30]},"y":{">ndarray

":"AAAAAAA6ukAAAAAAAACi6QAAAAAAAAG7pAAAAAAAAAGukAAAAAAAPK5QAAAAAAAAA47lAAAAAAAADYuUAAAAAAAMm5QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUAAAAAAACi5QAAAAAAAFblAAAAAAAAD8uEAAAAAAAAOq4QAAAAAAAA2rhAAAAAAADFuEAAAAAAALK4QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAID":"14848"}'

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

因此,您遇到了一个显然以前从未遇到过的极端案例交互。对于独立的HTML输出,Bokeh对NumPy数组或Pandas系列的CDS列执行base64编码,因为它比JSON处理数组(尤其是嵌套数组(例如图像))的性能更高。您可以在输出中将这些对象视为具有"ndarray"键的对象。通常,对于在show等过程中序列化的实际CDS对象,解码由BokehJS自动处理。

但是这种交互,其中数据被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)

您会注意到,输出现在没有输出中存在的"ndarray"对象。

输出[17]: '{"数据":{"一对":[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,5,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,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,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,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一些":[3,3,5,5,3,3,3,3,4,5,4,6,3,3,3,3,3,3,2,3,3,3,4,3,3,3,3,3,3,3,7,10,3,3,5,3,3,5,3,3,3,3,3,4],"很多":[20,12,15,50,10,9,50,30,16,80,50,25,10,10,10,10,10,20,20,10,10,12,20,10,9,25,10,12,14,47,10,2948,43,20,8,10,23,7,12,20,10,12,7,12,20

],"几十":[30,24,30,30,48,36,36,50,36,36,36,36,36,48,12,24,36,36,12,24,36,48,60,12,24,36,24,36,36,30,36,36,24,12,50, 36,12,40,36,24,24,36,36,60,120,36],"分数":[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.25,0.1,1.0,0.1,1.0,0.01,0.1,15.0,0.25,3.0,0.1,0.5,0.25,0.25,0.1,2.0,0.4,0.5,10.0,0.5,0.1,3.0,0.4,33.0,0.5,0.1,50.0,0.5,0.2,0.1,0.1,0.1,100.0],"数百":[250,200,500,500,599,400,200,1000,500,300,300,200,300,400,350,200,3000,300,200,200,200,300,400,250,300,250,200,200,300,500,200,318,300,500,120,700,300,100,400,500,300,500,200,300,300,300,500],"许多":[12,50,25,25,5,20,7,20,20,25,7,50,10,60,8,10,10,40,25,20,20,25,10,25,20,20,20,20,20,1000,30,100,25,20,58,7,6,10,15,20,5,25,80],"分数":[80,40,500,500,100000,400,8,100,100,1000,30000,100,50,40,14,6,40,50,3,40,300,80,100,30,40,60,100,2000,60,200,67,40,50,25,100,100, 100,40,40,300,1000,40,200,80,80,500],"若干":[7,10,4,4,5,7,3,10,8,8,4,8,7,7,4,4,7,5,10,2,5,6,7,8,4,7,10,5,7,7,4,4,4,7,10,5,7,5,5,5],"一些":[4,6,5,5,3,5,4,15,10,3,4,4,4,8,3,2,5,3,3,3,3,3,6,3,3,3,5,4,5,4,5,4,6,5,5,5,4,6,5,5,4,6,5,5,4,3,3,7],"索引":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45]},"id":"1001"}'

我建议您在 GitHub 上提交包含所有这些信息的错误报告,以便改善这种情况AjaxDataSource

最新更新