Question

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

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

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

我的攻击计划是编写一个JSON文件，该文件从Bokeh ColumnDataSource（df）.to_json_string（）提供AJAX流。这是首选方法，因为通常这样将数据馈送到涉及javascript组件的bokeh对象。根据ColumnDataSource的输出，Bokeh读取时似乎可以识别日期时间列的某种未知的哈希或重新编码。在将ColumnDataSource（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 + tHZCAAA6NT60dkIAAOBDPrR2QgAAhlI + tHZCAAAsYT60dkIAANJvPrR2QgAAeH4 + tHZCAAAejT60dkIAAMSbPrR2QgAAaqo + tHZCAAAQuT60dkIAALbHPrR2QgAAXNY + tHZCAAAC5T60dkIAAKjzPrR2QgAATgI / tHZC“， ”D型“： ”float64“， “形状”：[30]}， “指数”：{ “的 ndarray ”： “AACAWT20dkIAACZoPbR2QgAAzHY9tHZCAAByhT20dkIAABiUPbR2QgAAvqI9tHZCAABksT20dkIAAArAPbR2QgAAsM49tHZCAABW3T20dkIAAPzrPbR2QgAAovo9tHZCAABICT60dkIAAO4XPrR2QgAAlCY + tHZCAAA6NT60dkIAAOBDPrR2QgAAhlI + tHZCAAAsYT60dkIAANJvPrR2QgAAeH4 + tHZCAAAejT60dkIAAMSbPrR2QgAAaqo + tHZCAAAQuT60dkIAALbHPrR2QgAAXNY + tHZCAAAC5T60dkIAAKjzPrR2QgAATgI / tHZC”， “D型”： “float64”，”形状“：[30]}，” y“：{” ndarray “：”“ AAAAAAA6ukAAAAAAACi6QAAAAAAAG7pAAAAAAAAGukAAAAAA5 UAAAAAAACi5QAAAAAAAFblAAAAAAAD8uEAAAAAAAOq4QAAAAAAA2rhAAAAAAADFuEAAAAAAALK4QAAAAAAAprhAAAAAAAcouEAAAAAAAHm4QAAAAAAAZLhAAAAAAABOuEAAAAAAADm4QAAAAAAAIrhA“，” dtype“：”“”“”;“

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

Answer 1

因此，您遇到了一个极端案例交互，显然以前没有人遇到过。对于独立的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" 对象。

Out [17]：'{“ data”：{“ A couple”：[2,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,2]，“一些”：[3,3,5,5,3,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,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,300,300,200,200,300,400,250,300,250,200,200,300,500,200,318,300,500,120,700,300,20,20,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,500,300,300,300,500,300,300,300,300,300,300,500,300,300,300,500,300,300,300,500,300,300,500,300,300,300,500,300,300,500,300,300,500,300,300,500,300,300,500,300,300,500,300,300,300,500,300,300,500,300,300,500,300,300,500,300,300,500 ，10,60,8,10,3 0,9,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,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 ，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”}'

我建议您将所有这些信息提交给bug report on GitHub，以便改善AjaxDataSource的情况。

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

1 个答案: