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

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

这种方法效果很好，但在将日期时间添加到方程式时，问题变得复杂了。(特别是在x轴上)

我的攻击计划是编写一个JSON文件，该文件从Bokeh ColumnDataSource(df).to_json_string()提供AJAX流。这是首选方法，因为通常这样将数据馈送到涉及javascript组件的bokeh对象。根据ColumnDataSource的输出，Bokeh读取时似乎可以识别日期时间列的某种未知的哈希或重新编码。在将ColumnDataSource(df).to_json_string()作为流进行流式传输时，此自动识别不起作用AJAX源。我假设这需要在javascript方面进行一些额外的处理，但我无法在网上找到任何示例，说明应该如何进行散景图识别此数据。

importpandasaspdfrombokeh.models.sourcesimportAjaxDataSourcefrombokeh.plottingimportfigure,ColumnDataSourceadapter=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 + tHZCAAA6NT60dkIAAOBDPrR2QgAAhlI + tHZCAAAsYT60dkIAANJvPrR2QgAAeH4 + tHZCAAAejT60dkIAAMSbPrR2QgAAaqo + tHZCAAAQuT60dkIAALbHPrR2QgAAXNY + tHZCAAAC5T60dkIAAKjzPrR2QgAATgI / tHZC”， “D型”： “float64”， “形状”：[30]}，” index“：{”ndarray“：”AACAWT20dkIAACZoPbR2QgAAzHY9tHZCAAByhT20dkIAABiUPbR2QgAAvqI9tHZCAABksT20dkIAAArAPbR2QgAAsM49tHZCAABW3T20dkIAAPzrPbR2QgAAovo9tHZCAABICT60dkIAAO4XPrR2QgAAlCY + tHZCAAA6NT60dkIAAOBDPrR2QgAAhlI + tHZCAAAsYT60dkIAANJvPrR2QgAAeH4 + tHZCAAAejT60dkIAAMSbPrR2QgAAaqo + tHZCAAAQuT60dkIAALbHPrR2QgAAXNY + tHZCAAAC5T60dkIAAKjzPrR2QgAATgI / tHZC “ ”D型“： ”float64“， ”形状“：[30]}， ”Y“：{”ndarray“：” AAAAAAA6ukAAAAAAACi6QAAAAAAAG7pAAAAAAAAGukAAAAAAAPK5QAAAAAAA47lAAAAAAADYuUAAAAAAAMm5QAAAAAAAu7lAAAAAAACruUAAAAAAAJS5QAAAAAAAgLlAAAAAAABquUAAAAAAAFu5QAAAAAAARrlAAAAAAAA4uUAAAAAAACi5QAAAAAAAFblAAAAAAAD8uEAAAAAAAOq4QAAAAAAA2rhAAAAAAADFuEAAAAAAALK4QAAAAAAAprhAAAAAAACOuEAAAAAAAHm4QAAAAAAAZLhAAAAAAABOuEAAAAAAADm4QAAAAAAAIrhA”， “D型”： “float64”， “形状”：[30]}}， “ID”： “14848”}”

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

解决方案

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

但是这种交互(数据被消耗AjaxDataSource)存在问题。该AjaxDataSource不会不知道的base64编码，或者知道该怎么做的那些"ndarray"对象。在所有情况下，它都希望使用纯JSON数字数组。

遗憾的是，没有参数to_json_string，全局设置或环境变量来抑制base64编码(根据我的更好判断，我被说服删除了该编码)。因此，对于目前的解决方法，我最好的建议是对控制编码是否发生的函数进行猴子修补：

In[12]:frombokeh.sampledata.perceptionsimportnumberlyIn[13]:frombokeh.modelsimportColumnDataSourceIn[14]:importbokeh.util.serializationassIn[15]:s.array_encoding_disabled=lambdax:True# PATCH HERE FORCES ENCODE OFFIn[16]:source=ColumnDataSource(numberly)In[17]:source.to_json_string(include_defaults=False)

您会注意到输出现在不包含任何"ndarray"对象。

Out [17]：'{“ data”：{“ A couple”：[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2， 2,2,5,2,2,2,3,2,2,2,2,2,2,2,2,2,3,2,4,8,2,2,3,2,2,2， 3,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,3,3,4,3,7,10,3,3,5,3,3,3,5 ，3,3,3,4]，“很多”：[20,12,15,15,50,10,9,50,30,16,80,50,25,10,10,10,100,20， 20,10,10,12,20,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,100.0 ]，“数百个”：[250,200,500,500,599,400,200，1000,500,300,300,200,300,400,350,200,3000,300,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,300,500]，“很多”：[12,50,25,10,10,7,10,9,20,9,20,5,20,7,20,5,20,7,10 8,10,10,40,25,20,25,10,25,20,5,7,8,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,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,8,7,5,8 ，4,5,6,4,7,10,10,5,7,5,5]，“有些”：[4,6,5,5,3,5,4,15,5,10,3 ，4,4,8,3,2,5,3,3,3,3,6,3,3,5,4,5,4,4,4,5,5,5,5,5,4,5 ，6,6,5,4,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可以改善这种情况。