Bokeh实时图表刷新后X轴无法自动更新的技术问询

我碰到过类似的Bokeh实时可视化场景问题，来帮你分析原因并给出可行的解决方案：

问题原因 #

浏览器刷新后，新的客户端会话连接到Bokeh服务器时，虽然你在初始代码里设置了fg.x_range.follow = "end"，但此时服务器端的数据源已经积累了历史数据，x_range的初始范围会被固定为当前数据的最大/最小值，导致后续新增数据时，自动跟随的逻辑没有正确触发；另外，客户端视图初始化时可能没有正确同步follow的配置状态，也会导致这个问题。

解决方案 #

方案一：显式配置DataRange1d（最推荐）

直接在创建figure的时候，指定配置好的DataRange1d作为x_range，确保无论何时加载会话，x轴的跟随属性都能正确生效：

from bokeh.models import ColumnDataSource, DataRange1d

# 替换原figure创建代码
fg = figure(
    width=250, 
    plot_height=250, 
    title="RT-Test",
    x_range=DataRange1d(follow="end", follow_interval=100, range_padding=0.05)
)

• follow_interval设置为和你的update回调间隔一致（100毫秒），确保每次数据更新后x轴及时跟随；
• range_padding可以让x轴末端留一点空隙，避免数据点贴边，提升视觉体验。

方案二：添加会话创建回调

通过on_session_created回调，每当有新的客户端会话（比如浏览器刷新后），强制重新设置x_range的跟随属性，确保每个新会话都能启用自动跟随：

def on_session_created(session_context):
    # 为每个新会话配置x_range跟随
    fg.x_range.follow = "end"
    fg.x_range.follow_interval = 100
    fg.x_range.range_padding = 0.05

# 注册回调函数
curdoc().on_session_created(on_session_created)

把这段代码加在curdoc().add_root(fg)之后即可。

方案三：手动同步x_range（精细控制场景）

如果上面的方案都不生效，可以在数据更新时手动调整x_range的范围，确保始终包含最新的50个数据点：

def update():
    line = fa.readline().split(',')
    x = float(line[0])
    y = float(line[1])
    print(x, y)
    new_data = dict(x=[x], y=[y])
    source.stream(new_data, rollover=50)
    
    # 手动更新x_range，仅当新x值超过当前范围时扩展末端
    current_x = source.data['x']
    if len(current_x) > 0:
        if x > fg.x_range.end:
            # 保持x轴区间长度不变，只扩展末端
            interval_length = fg.x_range.end - fg.x_range.start
            fg.x_range.end = x
            fg.x_range.start = x - interval_length

这种方法适合需要严格控制x轴区间长度的场景，避免范围频繁跳动。

验证步骤 #

修改代码后，按以下步骤重新测试：

• 重启Bokeh服务器：bokeh serve --allow-websocket-origin=localhost:8000
• 运行脚本：python animated.py
• 启动简易Web服务器：python -m http.server（Python3）或python -m SimpleHTTPServer（Python2）
• 访问http://localhost:8000/animated.html，刷新浏览器后观察x轴是否正常跟随新增数据。

内容的提问来源于stack exchange，提问作者dudas